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>"，之后獲取 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') 來抓取所有的行。

 

這雖是個簡單的例子，但在感覺平常用到的概率還是挺高的，所以寫下來供參考~~ 如覺得本文有什么問題，還原拍磚，樓主虛心接受~~~