Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: Select a row from dynamically generated table w/o assigning an ID


Message #1 by "Stan" <sck01@a...> on Fri, 29 Nov 2002 19:21:44
Needs a little correcting, see below:
----- Original Message ----- 
From: "Joe Fawcett" <joefawcett@h...>
To: "javascript" <javascript@p...>
Sent: Saturday, November 30, 2002 9:10 AM
Subject: [javascript] Re: Select a row from dynamically generated table w/o
assigning an ID


>
> ----- Original Message ----- 
> From: "Stan" <sck01@a...>
> To: "javascript" <javascript@p...>
> Sent: Friday, November 29, 2002 7:21 PM
> Subject: [javascript] Select a row from dynamically generated table w/o
> assigning an ID
>
>
> > Any help would be greatly appreciated.
> >
> >
> > I have dynamically created a table of movie actors and their roles. I
need
> > to select a specific movie (i.e. row ) from the table.  I have seen how
> > people assign an ID to each row and reference the row by ID.  Given the
> > way I am building the table I am unable to assign an ID i.e.   <TR ID 
#
> > >  Is there a way to know which row or cell was clicked in the table and
> > call a function using onClick  ?
> >
> > Thank you for your help,
> > Stan
> >
> > function showMovie(castSortFunc)
> > {
> > var chosenMovie=Movie.dropDown().options.selectedIndex;
> > clearMovie(Movie.table,Movie.textAreaSummary());
> > Movie.textAreaSummary().value=movies[chosenMovie].Display();
> >
> > var table=document.getElementById(Movie.table);
> > table=table.firstChild;
> >
> > var headerRow=table.insertRow(table.rows.length);
> > var cell=headerRow.insertCell(0);
> > cell.colSpan=2;
> > cell.bgColor="ffffff";
> > cell.innerHTML="The Cast of "+movies[chosenMovie].Title;
> >
> > headerRow=table.insertRow(table.rows.length);
> > cell=headerRow.insertCell(0);
> > cell.innerHTML="Actor";
> > cell=headerRow.insertCell(1);
> > cell.innerHTML="Role";
> > headerRow.bgColor="ffffff";
> >
> > for(var i=0;i<movies[chosenMovie].Cast.length;i++)
> > {
> > var row=table.insertRow(table.rows.length);
> >
> > row.bgColor=(i%2==0)?"ffcc00":"buttonface";
> > var cell=row.insertCell(0);
> > cell.innerHTML=movies[chosenMovie].Cast[i].FullName();
> > var cell=row.insertCell(1);
> > cell.innerHTML=movies[chosenMovie].Cast[i].Role;
> > }
> >
> Well in IE, for Netscape 6+ you may need some slight modifications, then
> assign an onclick to the row when you create it:
> row.setAttribute("onclick", handleClick);
>
> function handleClick()
> {
>   alert(event.srcElement.cells[0].innerHTML);
>   //alert the contents of the first cell in the row clicked
> }
>
> Joe
>
Actually you would need to test the srcElement.tagName to see it doesn't
have to be the row it will normally be a 'td' element:
function handleClick()
{
  var oRow = (event.srcElement.tagName == "tr" ? event.srcElement :
event.srcElement.parentElement);
  alert(oRow.cells[0].innerHTML);
}

Joe

  Return to Index