Go Back   CodingForums.com > :: Client side development > JavaScript programming > DOM and JSON scripting

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-08-2006, 06:04 PM   PM User | #1
maruvada
New to the CF scene

 
Join Date: Mar 2006
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
maruvada is an unknown quantity at this point
Accessing tablecell values through DOM

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.
maruvada is offline   Reply With Quote
Old 03-08-2006, 07:26 PM   PM User | #2
Kravvitz
Senior Coder

 
Join Date: Feb 2006
Location: USA
Posts: 1,013
Thanks: 0
Thanked 0 Times in 0 Posts
Kravvitz is an unknown quantity at this point
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.
__________________
Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
Java != JavaScript && JScript != JavaScript
Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
Kravvitz is offline   Reply With Quote
Old 03-08-2006, 07:57 PM   PM User | #3
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,378
Thanks: 3
Thanked 466 Times in 453 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
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>
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Old 03-09-2006, 04:04 PM   PM User | #4
maruvada
New to the CF scene

 
Join Date: Mar 2006
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
maruvada is an unknown quantity at this point
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.
maruvada is offline   Reply With Quote
Old 03-09-2006, 07:15 PM   PM User | #5
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,378
Thanks: 3
Thanked 466 Times in 453 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
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>
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Old 03-10-2006, 12:13 AM   PM User | #6
maruvada
New to the CF scene

 
Join Date: Mar 2006
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
maruvada is an unknown quantity at this point
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.
maruvada is offline   Reply With Quote
Old 03-10-2006, 05:58 PM   PM User | #7
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,378
Thanks: 3
Thanked 466 Times in 453 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
Quote:
t you would help me through the scenario of checkbox implementation also
thought I did that in my last post
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:34 AM.


Advertisement
Log in to turn off these ads.