一个从数据库里查出来的数据放入如下表一中,比如表一数据是这样的,其中表格中是数字的是文本框,可以修改 表一
区域 张三 李四
广州 40 43
深圳 55 33请问怎么用javascript获取表一中每列的和值并动态显示于表二中,当表一的文本框中数据更改时,表二的统计即会动态更新。姓名 表二 合值
张三 95
李四 76请高手来解决,谢谢啦。
区域 张三 李四
广州 40 43
深圳 55 33请问怎么用javascript获取表一中每列的和值并动态显示于表二中,当表一的文本框中数据更改时,表二的统计即会动态更新。姓名 表二 合值
张三 95
李四 76请高手来解决,谢谢啦。
循环在表1 的文本框 添加 onchange 事件,
事件中 循环 表1 累计值,修改表2 的值就好了
document.getElementById('myTable').rows[0].cells[0].innerHTML
获取单元格数据!
<html>
<body><div>
<table border=1>
<thead id='th'><tr><td>区域</td></tr></thead>
<tbody id='tb1'></tbody>
</table>
<table border=1 >
<thead><tr><td>姓名</td><td>合计</td></tr></thead>
<tbody id='tb2'></tbody>
</table>
</div>
</body>
<script type="text/javascript">
var p=[{name:'张三',data:[{address:'广州',value:40},{address:'深圳',value:55}]},{name:'李四',data:[{address:'广州',value:30},{address:'深圳',value:65}]},{name:'王五',data:[{address:'广州',value:60},{address:'深圳',value:75}]}];
window.onload=function()
{
var th = document.getElementById("th");
var tb1=document.getElementById("tb1");
var tb2=document.getElementById("tb2");
var sum =0;
var tr;
var td;
var input;
var rowAddress;
for(var i=0;i< p.length;i++)
{
sum =0;
var th_col = document.createElement("td");
th_col.innerHTML = p[i].name;
th.rows[0].appendChild(th_col);
for(var j=0;j<p[i].data.length;j++)
{
if(i==0){
rowAddress = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = p[i].data[j].address;
rowAddress.appendChild(td);
}else{
rowAddress=tb1.rows[j];
}
sum+= p[i].data[j].value;
td = document.createElement("td");
input = document.createElement("input");
input.value = p[i].data[j].value;
td.appendChild(input);
input.colIndex = i;
input.onchange=function()
{
var sum=0;
for(var i=0;i<tb1.rows.length;i++)
{
sum += parseInt( tb1.rows[i].cells[this.colIndex+1].getElementsByTagName("input")[0].value,10);
}
tb2.rows[this.colIndex].cells[1].innerHTML=sum;
};
rowAddress.appendChild(td);
if(i==0)
{
tb1.appendChild(rowAddress);
}
}
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = p[i].name;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = sum;
tr.appendChild(td);
tb2.appendChild(tr);
}};
</script>
</html>
<html>
<body><div>
<table border=1>
<thead id='th'><tr><td>区域</td></tr></thead>
<tbody id='tb1'></tbody>
</table>
<table border=1 >
<thead><tr><td>姓名</td><td>合计</td></tr></thead>
<tbody id='tb2'></tbody>
</table>
</div>
</body>
<script type="text/javascript">
var p=[{name:'张三',data:[30,40,50,60]},{name:'李四',data:[33,40,55,67]},{name:'王五',data:[30,10,20,20]},{name:'赵六',data:[10,10,30,20]}];
var address=['广州','深圳','上海','成都'];
window.onload=function()
{
var th = document.getElementById("th");
var tb1=document.getElementById("tb1");
var tb2=document.getElementById("tb2");
var sum =0;
var tr;
var td;
var input;
var rowAddress;
for(var i=0;i< address.length;i++)
{
rowAddress = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = address[i];
rowAddress.appendChild(td);
tb1.appendChild(rowAddress);
}
for(var i=0;i< p.length;i++)
{
sum =0;
var th_col = document.createElement("td");
th_col.innerHTML = p[i].name;
th.rows[0].appendChild(th_col);
for(var j=0;j<p[i].data.length;j++)
{
rowAddress=tb1.rows[j];
sum+= p[i].data[j];
td = document.createElement("td");
input = document.createElement("input");
input.value = p[i].data[j];
td.appendChild(input);
input.colIndex = i;
input.onchange=function()
{
var sum=0;
for(var i=0;i<tb1.rows.length;i++)
{
sum += parseInt( tb1.rows[i].cells[this.colIndex+1].getElementsByTagName("input")[0].value,10);
}
tb2.rows[this.colIndex].cells[1].innerHTML=sum;
};
rowAddress.appendChild(td);
}
tr = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = p[i].name;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = sum;
tr.appendChild(td);
tb2.appendChild(tr);
}};
</script>
</html>