动态行

Question

我没有使用jQuery ......

我正在努力让一些总数更新onChange，但似乎并没有按照它应该的方式工作......我只是新手，所以请保持温和。

我希望在更改html输入值时动态计算Total列。我正在寻找实时显示和更新的总数，数量*成本。

<script type="text/javascript">
        function addRow(tableID) {

          /* bunch of other stuff (unimportant) */

                var cell3 = row.insertCell(3);
            var element3 = document.createElement("input");
            element3.type = 'text';
            element3.name = 'Qty' + rowCount;
            element3.onChange = function () {
                calcTotal(this)
            };
            cell3.appendChild(element3);

            var cell4 = row.insertCell(4);
            var element4 = document.createElement("input");
            element4.type = 'text';
            element4.name = 'Cost' + rowCount;
            element4.onChange = function () {
                calcTotal(this)
            };
            cell4.appendChild(element4);

            var cell5 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = 'text';
            element5.disabled = true;
            element5.name = 'Total' + rowCount;
            cell5.appendChild(element5);
        }

        function calcTotal(x) {

            var myRow = x.parentNode.parentNode;

            return alert(myRow);

            var c3 = myRow.cells[3];
            var c4 = myRow.cells[4];

            if (c3 && c4) {
                element5.value = c3 * c4;
            }
        }
    </script>

我面临的问题是

                element3.onChange = function () {
                calcTotal(this)
            };

实际上并没有将onChange插入到html输出中，所以我的想法是，当我改变html端的输入时，它实际上无法做任何事情。

输出：

<td><input type="text" name="Qty1"></td>

非常感谢任何意见。

JS Fiddle在这里：https://jsfiddle.net/brianramsey/hhLm4d8h/

Answer 1

您可以对输入文本字段使用onkeyup事件。

  element3.onkeyup = function () {
                    calcTotal(this)
                }   

此外，要获得所需的输入字段值：

    var c3 = parseInt(myRow.cells[3].firstChild.value);
    var c4 = parseInt(myRow.cells[4].firstChild.value);

并且，为了避免在调用calcTotal（）函数时未定义的element5出现问题：

 function calcTotal(x) {

                var myRow = x.parentNode.parentNode;



                var c3 = parseInt(myRow.cells[3].firstChild.value);
                var c4 = parseInt(myRow.cells[4].firstChild.value);


            if(c3&&c4)
                   myRow.cells[5].firstChild.value = c3 * c4;


            }

演示：https://jsfiddle.net/hhLm4d8h/16/