| |
|
|
| | С JavaScript знаком совсем немного (читаю Гутмана), поэтому много довольно простых проблем пока не могу решить. Подскажите, пожалуйста.
Ситуация такая. Есть таблица. В ней много строк. В ячейках различные цифры и с самой последней строчке сумма всех цифр столбца по вертикали.
На одной из строчек есть checkbox (checked). Убираешь галочку - в ячейках всей строки цифры пропадают и итоговая сумма тоже соответственно изменяется. Опять ставишь галочку - содержимое ячеек этой строки снова появляется и сумма в самом низу меняется соответственно. Checkbox не на каждой строчке (хотя можно и так), а на одной.
Все цифры выводятся при помощи PHP (на нем и завязаны все скрипты). Подскажите, как такое реализовать? Хотя бы пример с любыми цифрами и ячейками.
Заранее спасибо огромное! | |
| |
|
|
| |
|
|
| |
для: vitroot
(14.08.2008 в 06:17)
| | | Вот одно из возможных решений.
<html>
<head>
<style>
td{
text-align:center;
}
</style>
<script>
function calc(){
var rs=document.getElementById('tbl').rows;
var sum=new Array(rs[0].cells.length);
for(i=0;i<sum.length;i++)
sum[i]=0;
for(i=0;i<rs.length-1;i++){
if(rs[i].childNodes[0].childNodes[0].checked){
for(j=1;j<rs[i].cells.length;j++){
rs[i].childNodes[j].childNodes[0].style.visibility='visible';
sum[j]+=rs[i].childNodes[j].childNodes[0].innerHTML*1;
}
}
else
for(j=1;j<rs[i].cells.length;j++){
rs[i].childNodes[j].childNodes[0].style.visibility='hidden';
}
}
for(i=1;i<sum.length;i++)
rs[rs.length-1].childNodes[i].innerHTML=sum[i];
}
</script>
</head>
<body>
<table border='1' align='center' id="tbl">
<tr><td width='20px'><input type='checkbox' onclick="calc()" checked></td><td width='40px'><span>1</span></td><td width='40px'><span>2</span></td><td width='40px'><span>4</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>2</span></td><td><span>3</span></td><td><span>1</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>3</span></td><td><span>1</span></td><td><span>2</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>4</span></td><td><span>1.5</span></td><td><span>2</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>1</span></td><td><span>2.5</span></td><td><span>1</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>1</span></td><td><span>1</span></td><td><span>4</span></td></tr>
<tr><td><input type='checkbox' onclick="calc()" checked></td><td><span>5.5</span></td><td><span>1</span></td><td><span>2</span></td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script>
calc();
</script>
</body>
</html>
|
| |
| |
|
|
