一个从数据库里查出来的数据放入如下表一中,比如表一数据是这样的,其中表格中是数字的是文本框,可以修改               表一
区域          张三        李四
广州           40          43
深圳           55          33请问怎么用javascript获取表一中每列的和值并动态显示于表二中,当表一的文本框中数据更改时,表二的统计即会动态更新。姓名           表二      合值
张三                      95
李四                      76请高手来解决,谢谢啦。

解决方案 »

  1.   

    文本框做一个触发事件,文本框的id或者name是按照列命名,例如<input name="gz_zhangsan"/> 代表广州张三,编辑文本框的时候,根据name找到具体的人,则进行重新统计所在列的值(例如统计张三),然后找到张三所在的表二的显示位置,更新!
      

  2.   

    表1的列数 顺序和表2 的行数 顺序一一对应。很容易解决!
    循环在表1 的文本框 添加 onchange 事件,
    事件中 循环 表1 累计值,修改表2 的值就好了
      

  3.   


    document.getElementById('myTable').rows[0].cells[0].innerHTML
    获取单元格数据!
      

  4.   


    <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>
      

  5.   


    <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>