有点难度,请大家帮帮忙,如何自动得到小计和总计

基本思想就是给每行一个ID来标识它, 比如产品ID的ID就是product123, 那么数量的ID就是count123, 价格是price123, 小计是amount123, 每当信息输入的时候都可以触发一个事件然后循环遍历每一行进行计算.

解决方案 »

  1.   

    輸入数量和价格的文本框加onChange事件,
    function txtOnchage(obj)
    {
      // 得到這行的父節點的父節點<TR> 
      var objP = obj.parentNode.parentNode;
      // 得到<TR>下的所有子元素
      var objChild = objP.childNodes[0].childNodes; 
      // 然後可以隨意的取得任一元素的值或者給元素賦值了
      objChild[index].value
      不過這個時候要判斷objChild[index].tagName是否是input 
      你的子元素裡面可能包涵其它的元素 
    }
      

  2.   

    以下代码在ie6和firefox2.0.0.9下运行通过：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    </head><style>
    .title {
    font-size: 16px;
    background-color: #5555CC;
    color: white;
    font-weight: bold;
    }td {
    font-size: 12px;
    }td.product {
    text-align: center;
    }td.count {
    text-align: right;
    }input.price {
    text-align: right;
    width: 90%;
    border: 1px #555555 solid;
    }
    </style><body>
    <table id="MyTable" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <th width="120" class="title">&nbsp;product id</th>
    <th width="140" class="title">&nbsp;quantity</th>
    <th width="140" class="title">&nbsp;price</th>
    <th width="140" class="title">&nbsp;count</th>
    </tr>
    <tr id="tr_cnt_1">
    <td class="product" value="1">&nbsp;1</td>
    <td class="count">
    <input type="text" id="quantity_1" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count">
    <input type="text" id="price_1" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count" value="">&nbsp;</td>
    </tr>
    <tr id="tr_cnt_2">
    <td class="product" value="2">&nbsp;2</td>
    <td class="count">
    <input type="text" id="quantity_2" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count">
    <input type="text" id="price_2" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count" value="">&nbsp;</td>
    </tr>
    <tr id="tr_cnt_3">
    <td class="product" value="">&nbsp;</td>
    <td class="count">
    <input type="text" id="quantity_3" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count">
    <input type="text" id="price_3" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count" value="">&nbsp;</td>
    </tr>
    <tr id="tr_cnt_4">
    <td class="product" value="5">&nbsp;5</td>
    <td class="count">
    <input type="text" id="quantity_4" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count">
    <input type="text" id="price_4" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count" value="">&nbsp;</td>
    </tr>
    <tr id="tr_cnt_5">
    <td class="product" value="" id="ddd">&nbsp;</td>
    <td class="count">
    <input type="text" id="quantity_5" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count">
    <input type="text" id="price_5" class="price" value="" onblur="doCal(this)" />
    </td>
    <td class="count" value="">&nbsp;</td>
    </tr>
    </table>
    <br />
    Totalprice:&nbsp;<input type="text" id="total" readonly class="price" style="width: 120px" value="0" />
    <br />
    <button onclick="alert(document.body.innerHTML)">aaa</button>
    </body>
    </html><script language="JavaScript">
    <!--//initalize the page
    (function () {
    String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
    }; var _rows = $("MyTable").rows.length; for (var i = 1; i < _rows; i++)
    {
    var _tr = $("MyTable").rows[i];
    var _tds = _tr.childNodes; var prodId = _tr.cells[0].getAttribute("value"); if (prodId.trim() == "")
    {
    _tr.cells[1].getElementsByTagName("input")[0].setAttribute("readOnly", "true");
    _tr.cells[2].getElementsByTagName("input")[0].setAttribute("readOnly", "true");
    }
    } doSum();
    })();function doCal(obj) {
    var optFlag = true;
    var _tr = obj.parentNode.parentNode;
    var _num = _tr.cells[1].getElementsByTagName("input")[0].value;
    var _pri = _tr.cells[2].getElementsByTagName("input")[0].value; if (isNaN(obj.value) || obj.value.trim() == "")
    {
    obj.value = "";
    _tr.cells[3].innerHTML = "&nbsp;";
    optFlag = false;
    } if (_num.trim() == "" || _pri.trim() == "")
    {
    _tr.cells[3].innerHTML = "&nbsp;";
    optFlag = false;
    } if (optFlag)
    {
    var _cnt = _num * 1 * _pri;
    _tr.cells[3].innerHTML = "&nbsp;" + _cnt;
    _tr.cells[3].setAttribute("value", _cnt);
    } doSum();
    }function doSum() {
    var _sum = 0;
    var _rows = $("MyTable").rows.length; for (var i = 1; i < _rows; i++)
    {
    var _tr = $("MyTable").rows[i];
    var _tds = _tr.childNodes; var prodId = _tr.cells[0].getAttribute("value"); if (prodId.trim() != "")
    {
    _sum += _tr.cells[3].getAttribute("value") * 1;
    }
    } $("total").value = _sum;
    }function $(id) {
    return document.getElementById(id);
    }//-->
    </script>