js/Jquery table 内部控件计算和tr的生成

这种table + js的计算大家都不陌生，无论是做门户网站的、还是做业务系统的经常会遇到这些东西。关于这种统计的计算大家应该都会用前端控制吧，有点就不说了，控制的代码相对比较简单。

function ChangeQuantity(control) {

            var table = control.parentNode.parentNode.parentNode;

            var total = 0.0;

            var price = 0.0;

            var quantity = 0.0;

 

           for ( var i = 1; i < table.rows.length; i++) {

                price = rows[i].cells[2].innerHTML;

                var quantityControl = rows[i].cells[1].getElementsByTagName( "INPUT" )[0];

 

                quantity = quantityControl.value;

                total += price * quantity;

            }

            document.getElementById( "lblTotal" ).innerHTML = total;

        }

这里每次都对整个table进行计算，也可以就针对修改的这当前行进行计算。

很多时候这个table，后台数据绑定Repeater生成的。这种算最简单的，可以直接套用上面的方法。

但有的时候table是通过前段Js生成的，这个需要注意几个问题，先看一遍代码吧

首先，页面上有一个只含标题的table

< table id="list">         < tr style="background: #F0F0F0;">                < td style="text-align:left; width:100px; padding:0px 10px">名称</ td >                < td style="text-align:center; width:35px">数量</ td >                < td style="text-align:center; width:35px">单价</ td >                < td style="text-align:center; width:35px">移除</ td >          </ tr > </ table >

通过Js事件给list添加行

function addRow() {              var length = document.getElementById( "list" ).rows.length;              var tr = document.createElement( "tr" );                var inpid = "quantity" + tr.id;                var trhtml = "<td style=\"text-align:left; width:100px;padding:0px 10px\">红烧肉</td>" ;              trhtml += "<td style=\"text-align:center; width:35px\"><input style=\"width:20px; text-align:center;\" id='" + inpid + "' type='text' value='1' onchange='changeQuantity(this)'/></td>" ;              trhtml += "<td style=\"text-align:center; width:35px\">20</td>" ;              trhtml += "<td style=\"text-align:center; width:35px\"><img src=\"Style/AdminCss/sh_ico_2.gif\" alt='' onclick='removeRow(this)' /></td>" ;                $(tr).html(trhtml);              document.getElementById( "list" ).appendChild(tr);   }

这里是直接编辑html代码，然后通过Jquery的html方法赋值

这里之所以不用 tr.innerHTML 方式是有原因的，innerHTML属性只读属性的，比如先赋值 tr.innerHTML="<td>xxxxx</td&gt;"，之后获取 tr.innerHTML，这时候你会发现获取到的值是"xxxxx</td>"。所以这里用到了Jquery已经封装好的方法html()，而jquery里是用了try，catch来检测，如果报错则在catch里重新调用this.empty().append(value)，是通过append来添加字符串的。

而且，自动生成tr的方式得到的table里面的计算方式也不能用上面的了（右键属性看源代码的时候并未没有这些插入的代码，其实也很好理解）。代码做一个小小的改动

function changeQuantity(control) {              var table = control.parentNode.parentNode.parentNode;              var total = 0.0;              var price = 0.0;              var quantity = 0.0;                var rows = table.getElementsByTagName( 'TR' );              for ( var i = 1; i < rows.length; i++) {                  price = rows[i].cells[2].innerHTML;                  var quantityControl = rows[i].cells[1].getElementsByTagName( "INPUT" )[0];                  quantity = quantityControl.value;                  total += price * quantity;              }              document.getElementById( "lblTotal" ).innerHTML = total;          }

table.rows 来获取当前table所有行，这个在谷歌浏览器里面没问题，如果在IE里面，不管你通过addRow的方式添加了多少行table.rows只能获取一行（标题行）

从IE支持CSS3的程度大家都懂得。所以为了兼容IE 只能通过 table.getElementsByTagName('TR') 来抓取所有的行。

总结一下需要注意的两点

1：innerHTML的只读性，2：IE对动态添加tr的支持性

这虽是个简单的例子，但在感觉平常用到的概率还是挺高的，所以写下来供参考~~ 如觉得本文有什么问题，还原拍砖，楼主虚心接受~~~