Hello,
I am displaying my query result from a database in an HTML table . The table has many columns and one of them is a checkbox. Depending on the query result, the numbers of records vary. What I want to do is when a checkbox is checked , I want to be able to show a hidden a comment field (td) for that record.
The code below only toggles the td on the first row. Eventhough I click the checkbox on other rows beside the first row, the function only show/hide the
comment td for the first record.
My question is do I need to loop through the table and find out the current row where the checkbox checked? or how can I achieve this.
Any suggestion is greatly appreciated.
Thank you
I am calling this function on checkbox onclick
function togglevisibility(val, comment)
{
if (val.checked == true )
The script code you posted appears to do its job correctly, which implies that the problem is elsewhere.
Do you have a test page that we can look at, or failing that, HTML code showing how the script is being called, and what parts the script interacts with?
In this code I have 3 columns per row. The 2nd col is a checkbox. When you click a checkbox the 3rd column (comments) in that row is displayed. If you click the checkbox again the comments are hidden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.tdHidden {
visibility: hidden
}
</style>
<script type="text/javascript">
function getNextSibling(elem) {
var nextSib = elem.nextSibling;
while (nextSib.nodeType !=1 ){
nextSib = nextSib.nextSibling;
}
return nextSib;
}
//assign an onclick even handler to the checkboxes
window.onload=function() {
var chkBoxes = document.getElementById('table1').getElementsByTagName('input');
for(i=0; i < chkBoxes.length; i++) {
chkBoxes[i].onclick=function() {
var nextTd = getNextSibling(this.parentNode) ; //get the next td in this row
nextTd.style.visibility = (this.checked)? 'visible' : '';
}
}
}
</script>
</head>
<body>
<table id="table1" cellspacing="20">
<tr>
<td>row 1</td>
<td><input type="checkbox" /></td>
<td class="tdHidden">comment row 1</td>
</tr>
<tr>
<td>row 2</td>
<td><input type="checkbox" /></td>
<td class="tdHidden">comment row 2</td>
</tr>
<tr>
<td>row 3</td>
<td><input type="checkbox" /></td>
<td class="tdHidden">comment row 3</td>
</tr>
</table>
</body>
</html>
and the same to you :Partier: