js/Jquery table 内部控件计算和tr的生成
2013-03-13 12:40
232 查看
之间写过这么一篇文章,感觉还是有点不细腻,今天做一个补充。好了废话先不多说了,先看张图片
这种table + js的计算大家都不陌生,无论是做门户网站的、还是做业务系统的经常会遇到这些东西。关于这种统计的计算大家应该都会用前端控制吧,有点就不说了,控制的代码相对比较简单。
这里每次都对整个table进行计算,也可以就针对修改的这当前行进行计算。
很多时候这个table,后台数据绑定Repeater生成的。这种算最简单的,可以直接套用上面的方法。
但有的时候table是通过前段Js生成的,这个需要注意几个问题,先看一遍代码吧
首先,页面上有一个只含标题的table
通过Js事件给list添加行
这里是直接编辑html代码,然后通过Jquery的html方法赋值
这里之所以不用 tr.innerHTML 方式是有原因的,innerHTML属性只读属性的,比如先赋值 tr.innerHTML="<td>xxxxx</td>",之后获取 tr.innerHTML,这时候你会发现获取到的值是"xxxxx</td>"。所以这里用到了Jquery已经封装好的方法html(),而jquery里是用了try,catch来检测,如果报错则在catch里重新调用this.empty().append(value),是通过append来添加字符串的。
而且,自动生成tr的方式得到的table里面的计算方式也不能用上面的了(右键属性看源代码的时候并未没有这些插入的代码,其实也很好理解)。代码做一个小小的改动
table.rows 来获取当前table所有行,这个在谷歌浏览器里面没问题,如果在IE里面,不管你通过addRow的方式添加了多少行table.rows只能获取一行(标题行)
从IE支持CSS3的程度大家都懂得。所以为了兼容IE 只能通过 table.getElementsByTagName('TR') 来抓取所有的行。
总结一下需要注意的两点
1:innerHTML的只读性,2:IE对动态添加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>",之后获取 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的支持性
这虽是个简单的例子,但在感觉平常用到的概率还是挺高的,所以写下来供参考~~ 如觉得本文有什么问题,还原拍砖,楼主虚心接受~~~
相关文章推荐
- js/Jquery table 内部控件计算和tr的生成
- jquery 将循环生成的多个tr放入table中的指定位置一法
- js jquery获取随机生成id的服务器控件的三种方法
- Jquery :动态给Table指定行或尾行插入tr和相关,遍历页面所有控件获取id
- jquery自动生成分页控件 - pagetest.js
- jquery、js获取table,遍历输出tr中各个td的内容。
- JS -- <table> 行号自增,前端动态生成的<tr>
- js jquery获取随机生成id的服务器控件的三种方法
- js jquery计算时间差与根据时间差生成时间
- JS 排序输出实现table行号自增前端动态生成的tr
- JS 排序输出实现table行号自增前端动态生成的tr
- JS+jquery 计算服务器控件textbox的值并显示在lable上
- 验证控件jquery.validator.js
- jQuery验证控件jquery.validate.js使用说明+中文API
- 帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js
- js生成table
- jquery each控制checkbox有关内容(table tr)的显示或隐藏(jquery 按条件隐藏显示已输出内容)
- jQuery注册表格(table)行(tr)点击选中checkbox事件
- js 前台找控件(table里找控件)
- QRCode.js:基于JQuery的生成二维码JS库的使用