Accessing tablecell values through DOM

maruvada · 03-08-2006, 06:04 PM

Hi,
I am a new member to this forum.

Plz help me with this problem.

I have a web page with a table displayed in it.

I need to select MULTIPLE ROWS from it with mouse click.

When clicked on a row there should be a color change to indicate that it is selected.

Then, I need to access the values in the rows, and hence table cells so as to store them back in some other database.

Thanks in advance.

Kravvitz · 03-08-2006, 07:26 PM

I suggest you use checkboxes. If you want to, you can absolutely position the elements off the left side of the viewport. When a row is clicked on, you toggle the checked property of the checkbox.

vwphillips · 03-08-2006, 07:57 PM

what values?

but

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function GetRow(zxce){
 var zxcobj=zxcEventObj(zxce)
 var zxcrow;
 while (zxcobj.tagName!='TABLE'){
  if (zxcobj.tagName=='TR'){
   zxcrow=zxcobj;
  }
  zxcobj=zxcobj.parentNode;
 }
 if (!zxcobj.ary){ zxcobj.ary=[]; }
 if (!zxcrow.set){ zxcrow.set=true; zxcobj.ary.push(zxcrow); }
 zxcrow.style.backgroundColor='red';
}

function ShowRows(tid,txtid){
 var tobj=document.getElementById(tid);
 var txtobj=document.getElementById(txtid);
 if (!tobj.ary){ return; }
 var tds;
 txtobj.value='';
 for (var zxc0=0;zxc0<tobj.ary.length;zxc0++){
  tds=tobj.ary[zxc0].getElementsByTagName('TD');
  tobj.ary[zxc0].style.backgroundColor='white';
  for (var zxc1=0;zxc1<tds.length;zxc1++){
   txtobj.value+=tds[zxc1].innerHTML+',';
  }
 }
 tobj.ary.length=0;
}

function zxcEventObj(zxce){
 if (!zxce) var zxce=window.event;
 if (zxce.target) zxceobj=zxce.target;
 else if (zxce.srcElement) zxceobj=zxce.srcElement;
 if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
 return zxceobj;
}



//-->
</script></head>

<body>
<table id="fred" border="1" onclick="GetRow(event);" >
 <tr>
  <td> Tom 0 </td>
  <td> Dick 0 </td>
  <td> Harry 0 </td>
 </tr>
 <tr>
  <td> Tom 1 </td>
  <td> Dick 1 </td>
  <td> Harry 1 </td>
 </tr>
 <tr>
  <td> Tom 2 </td>
  <td> Dick 2 </td>
  <td> Harry 2 </td>
 </tr>
</table>
<input type="button" value="ShowRows" onclick="ShowRows('fred','OPTxt');" >
<input type="text" value="" id="OPTxt" size="100" >
</body>

</html>

maruvada · 03-09-2006, 04:04 PM

Hello......

Thanks for the replies.

My problem is that the table that is displayed is dynamic...which i have obtained through DB using JSP.

Hence, how to address the rows of the table using seperate check boxes??
Since, I need to loop to create the check boxes even..just like the rows.

How do the check boxes need to be addressed(accessed) if all are not given different names..since i made a loop..addressing them by different names.....is that possible???

Plz guide me as how to address the checkboxes so as to access the values.....

Note:
THE SCENARIO I REQUIRE HERE IS JUST LIKE THE YAHOO MIAL WHERE IN I CLICK THE CHECKBOXES SO AS TO DELETE THE MAILS IN THE INBOX.

The same is the case here...I need to click on the checkboxes so as to delete some of the rows of the DYNAMICALLY growing or generated table.

vwphillips · 03-09-2006, 07:15 PM

did you even look at the code i posted???

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (09-Mar-2006) http://www.vicsjavascripts.org.uk

function NewRow(tid,cid){
 var tobj=document.getElementById(tid);
 var clone=document.getElementById(cid).getElementsByTagName('TR')[0].cloneNode(true);
 tobj.appendChild(clone);
}

function DeleteRow(tid){
 var tobj=document.getElementById(tid);
 var trs=tobj.getElementsByTagName('TR');
 var ary=[];
 for (var zxc0=0;zxc0<trs.length;zxc0++){
  ary.push(trs[zxc0]);
 }
 for (var zxc1=0;zxc1<ary.length;zxc1++){
  if (ary[zxc1].getElementsByTagName('INPUT')[1].checked){
   tobj.removeChild(ary[zxc1]);
  }
 }
}

//-->
</script>

</head>

<body>
<table border="1">
<tbody id="MyTable" ></tbody>
</table>
<input type="button" value="New Row" onclick="NewRow('MyTable','Clone');" >
<input type="button" value="Remove Ticked Rows" onclick="DeleteRow('MyTable');" >

<table id="Clone" border="1" style="position:absolute;visibility:hidden;" >
 <tr>
  <td width="100" ><input ></td>
  <td width="20"><input type="checkbox" ></td>
 </tr>
</table>
</body>

</html>

maruvada · 03-10-2006, 12:13 AM

Hello Phillips....

I have gone through the code you posted and I did run it. But, selecting multiple rows through mouse pointer is a problem.

So, I thought of giving it an implementation through CHECKBOXES just like a mail inbox.

I once again thank you for the help you have extended to me.

I hope that you would help me through the scenario of checkbox implementation also.

vwphillips · 03-10-2006, 05:58 PM

Quote:

t you would help me through the scenario of checkbox implementation also

thought I did that in my last post