javascript - 动态行的内联计算

Question

我没有使用 jQuery...

我正在尝试在 Change 上更新一些总计，但似乎并没有像预期的那样在盒子上工作...我只是 JavaScript 新手，所以请保持温柔。

我希望在 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/