sanju a écrit :
Hi all,
I am new in the world of javascript. Someone plz help me.
I have two tables containing 30 rows each. In first table there is
checkbox and in the second table there is radio buttons ahead each
row. If i select 5th & 6th row from first table then it should show
only the 5th & 6th row from the second table. The rows are same in
both table. Likewise the rows i select from first table should only
display from the second table..
You must hide by JS each row of 2nd table
function hid() {
var t2 = document.getElementById('table2');
t2 = t2.getElementsByTagName('TBODY')[0].rows;
for(var i=0; i<t2.length; i++)
t2[i].style.display = 'none';
}
Then you must to have a function to see what is checked
function chck() {
var C = new Array();
var k = 0;
var t1 = document.getElementById('table2');
t1 = t1.getElementsByTagName('TBODY')[0].rows;
for(var i=0; i<t2.length; i++)
if(t2[i].getElementsByTagName('INPUT')[0].checked) {
C[k] = i;
k++;
}
return C;
}
And something to reveal correct rows :
function myRows() {
hid();
var C = chck();
var t2 = document.getElementById('table2');
t2 = t2.getElementsByTagName('TBODY')[0].rows;
for(var i=0; i<C.length; i++)
t2[C[i]].style.display = '';
}
<html>
<script type="text/javascript">
var t1, t2;
function init() {
t1 = document.getElementById('table1');
t1 = t1.getElementsByTagName('TBODY')[0].rows;
t2 = document.getElementById('table2');
t2 = t2.getElementsByTagName('TBODY')[0].rows;
hid();
}
onload = init;
function hid() {
for(var i=0; i<t2.length; i++) {
t2[i].style.display = 'none';
t2[i].getElementsByTagName('INPUT')[0].checked=false;
}
}
function chck() {
var C = new Array();
var k = 0;
for(var i=0; i<t1.length; i++)
if(t1[i].getElementsByTagName('INPUT')[0].checked) {
C[k] = i;
k++;
}
return C;
}
function myRows() {
hid();
var C = chck();
for(var i=0; i<C.length; i++) {
t2[C[i]].style.display = '';
// t2[C[i]].getElementsByTagName('INPUT')[0].checked=true;
}
}
</script>
<form>
<table id="table1" border="1" width="90%" cellspacing="2">
<tr>
<td><input type=checkbox onclick="myRows()"></td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td><input type=checkbox onclick="myRows()"></td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
<tr>
<td><input type=checkbox onclick="myRows()"></td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
</tr>
<tr>
<td><input type=checkbox onclick="myRows()"></td>
<td>_Row_4_Cell_2_</td>
<td>_Row_4_Cell_3_</td>
</tr>
<tr>
<td><input type=checkbox onclick="myRows()"></td>
<td>_Row_5_Cell_2_</td>
<td>_Row_5_Cell_3_</td>
</tr>
</table>
<table id="table2" border="1" width="90%" cellspacing="2">
<tr>
<td><input type=radio name=rad></td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td><input type=radio name=rad></td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
<tr>
<td><input type=radio name=rad></td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
</tr>
<tr>
<td><input type=radio name=rad></td>
<td>_Row_4_Cell_2_</td>
<td>_Row_4_Cell_3_</td>
</tr>
<tr>
<td><input type=radio name=rad></td>
<td>_Row_5_Cell_2_</td>
<td>_Row_5_Cell_3_</td>
</tr>
</table>
</form>
</html>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
