| |
|
|
| | здравствуйте, искал на форуме - не смог найти, по сему, собственно, обращаюсь за советом.
есть вот такая вот табличка: http://leemp.net.ru/files/1.jpg при нажатии на чекбокс необходимо чтобы весь <tr> менял класс, и при повторном клике - менял обратно(типа toggle), только и всего. при этом крайние верхний и нижний чекбоксы - соответственно выполняют функцию "выбрать все", при нажатии на который, выбираются все чекбоксы (реализовал сам) и подсвечиваются также все выбранные <tr>. прошу неистово помощи, ибо сам извелся, а в javascript не силен практически.
<form name="form1" id="form1" method="post" action="">
<table id="traders-table" cellpadding="0" cellspacing="0">
<tr class="table-title">
<td class="check-td"><input value="0" name="allUrl" id="allUrl" onchange="checkAll();" type="checkbox"></td>
<td class="id-td">id</td>
<td>Название</td>
</tr>
<?php
$query = $sql->query("select * from groups;");
while($arr = mysql_fetch_array($query)) {
echo '
<tr class="odd-line" id="tdee">
<td class="check-td"><input type="checkbox" name="checkbox[]" value="'.$arr['id'].'"></td>
<td>'.$arr['id'].'</td>
<td>'.$arr['name'].'</td>
</tr>';
}
?>
<tr class="table-title">
<td class="check-td"><input value="0" name="allUrl1" id="allUrl1" onchange="checkAll1();" type="checkbox"></td>
<td class="id-td">id</td>
<td>Название</td>
</tr>
</table>
...
<script type="text/javascript" language="javascript">
function checkAll()
{
var frm = document.getElementById('form1');
var allUrl = document.getElementById('allUrl');
var bChecked = allUrl.checked;
for (i = 0; i < frm.elements.length; i++)
{
if (frm.elements[i].type == 'checkbox')
{
frm.elements[i].checked = bChecked;
}
}
return;
}
</script>
|
тот самый класс odd-line | |
| |
|
|
| |
|
|
| |
для: LimP
(01.09.2009 в 19:30)
| | |
<style type="text/css">
<!--
.odd-line {background-color: #CCCCFF;}
.odd-line-select {background-color: #0000FF;}
-->
</style>
<script type="text/javascript" language="javascript">
function checkAll(oForm, cbName, checked){
for(var i = 0; i < oForm[cbName].length; i++){
oForm[cbName][i].checked = checked;
if(oForm[cbName][i].value > 0){
if(checked) oForm[cbName][i].parentNode.parentNode.className = 'odd-line-select';
else oForm[cbName][i].parentNode.parentNode.className = 'odd-line';
}
}
}
function ClassTr(zzz){
if(zzz.parentNode.parentNode.className == 'odd-line') zzz.parentNode.parentNode.className = 'odd-line-select';
else zzz.parentNode.parentNode.className = 'odd-line';
}
</script>
<form>
<table cellpadding="2" cellspacing="2">
<tr>
<td><input value="0" name="checkbox[]" onclick="checkAll(this.form, 'checkbox[]', this.checked)" type="checkbox"></td>
<td>id</td><td>Название</td>
</tr>
<tr class="odd-line">
<td><input name="checkbox[]" type="checkbox" onClick="ClassTr(this);" value="1"></td>
<td>1</td><td>name_1</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox" name="checkbox[]" onClick="ClassTr(this);" value="2"></td>
<td>2</td><td>name_2</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox" name="checkbox[]" onClick="ClassTr(this);" value="3"></td>
<td>3</td><td>name_3</td>
</tr>
<tr>
<td><input value="0" name="checkbox[]" onClick="checkAll(this.form, 'checkbox[]', this.checked)" type="checkbox"></td>
<td>id</td><td>Название</td>
</tr>
</table>
|
Налеюсь разберётесь что с этим делать. | |
| |
|
|
| |
|
|
| |
для: mikha
(02.09.2009 в 07:38)
| | |
<style type="text/css">
<!--
.odd-line {background-color: #CCCCFF;}
.odd-line-select {background-color: #0000FF;}
-->
</style>
<script>
function getSource(e) {
return (e.target) ? e.target : e.srcElement;
}
function lihtTable(e){
if(e.type=='checkbox') {
e.parentNode.parentNode.className = e.checked ? "odd-line-select" : "odd-line";
}
}
</script>
<form onclick="lihtTable(getSource(event))">
<table cellpadding="2" cellspacing="2">
<tr class="odd-line">
<td><input type="checkbox"></td>
<td>id</td><td>Название</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox"></td>
<td>1</td><td>name_1</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox"></td>
<td>2</td><td>name_2</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox"></td>
<td>3</td><td>name_3</td>
</tr>
<tr class="odd-line">
<td><input type="checkbox"></td>
<td>id</td><td>Название</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: mikha
(02.09.2009 в 07:38)
| | | спасибо большое, я балда через парент не додумался, хотя недавно про них читал. | |
| |
|
|
