时间戳

首页 > 解决方案 > 表中的事件监听器

javascript - 表中的事件监听器

问题描述

我正在尝试创建一个聚合表，其中从属元素将汇总为其父元素。每个元素都包含一个类，该类等于其父元素的 id。我已将事件侦听器添加到表的每个元素中，以便总和会向上爬到树上。代码大致如下：

var x = document.getElementsByName("item.AmountY0");
for (i = 1; i < (x.length - 3); i++) {
   x[i].addEventListener("change", function(e) {
      if (x[i].tagName == "TD") {
         document.getElementById("y0_" + x[i].className).innerHTML =
            String(parseInt(document.getElementById("y0_" + x[i].className).innerHTML) + parseInt(x[i].innerHTML));
      }
      if (x[i].tagName == "INPUT") {
         document.getElementById("y0_" + x[i].className).innerHTML =
            String(parseInt(document.getElementById("y0_" + x[i].className).innerHTML) + parseInt(x[i].value));
      }
   }, false);
};

当我在控制台中检查单个表格元素时，直接父元素会更新，但其他祖父母不会更新。但是，当我运行该页面时，什么也没有发生（并且没有报告错误）。

对应的HTML代码如下：

        @foreach (var item in Model)
        { 
                string y0_id = "y0_" + item.AlphaCode;
                string class_parent = item.ParentCode;
                string class_parent_right = item.ParentCode + " " + item.CssClassAmt;

                <tr class="@item.CssClassRow">
                    <td hidden="true">@Html.DisplayFor(modelItem => item.FullSymbol)</td>
                    <td hidden="true">@Html.DisplayFor(modelItem => item.AlphaCode)</td>
                    <td hidden="true">@Html.DisplayFor(modelItem => item.ParentCode)</td>
                    <td>@Html.DisplayFor(modelItem => item.Symbol)</td>
                    <td class="@item.CssClassCell">@Html.DisplayFor(modelItem => item.PositionName)</td>

                    @if (item.IsFinal[0].Equals('0')) {
                        <td id=@y0_id class=@class_parent style="text-align: right; width: 120px;" name="item.AmountY0">@Html.DisplayFor(modelItem => item.AmountY0)</td>                    }
                    else
                    {
                        <td>@Html.TextBoxFor(modelItem => item.AmountY0, new { @id = y0_id, @class = class_parent, @style = "text-align: right; width: 120px;"})</td>
                    }

                    <td>@Html.TextBoxFor(modelItem => item.FinNote, new { @class = item.CssClassNote })</td>
                    <td><a id="js-modal-prompt" class="uk-button uk-button-default uk-button-small" style="line-height: 19px" href="#">+</a></td>
                </tr>

请问有什么提示吗？

标签： javascript.netrazordom-events

解决方案

这个问题似乎与闭包有关。您可以使用以下方法修复它：

var x = document.getElementsByName("item.AmountY0");
for (i = 1; i < (x.length - 3); i++) {
   (function() {
      var elm = document.getElementById("y0_" + x[i].className);
      x[i].addEventListener("change", function(e) {
         if (x[i].tagName == "TD") {
            elm.innerHTML = String(parseInt(elm.innerHTML) + parseInt(x[i].innerHTML));
         }
         if (x[i].tagName == "INPUT") {
            elm.innerHTML = String(parseInt(elm.innerHTML) + parseInt(x[i].value));
         }
      }, false);
   }());
};

推荐阅读