Слушатели событий в таблице - PullRequest
Новая
       7

Слушатели событий в таблице

0 голосов
/ 07 марта 2020

Я пытаюсь создать агрегированную таблицу, в которой подчиненные элементы суммируют свои родительские элементы. Каждый элемент содержит класс, равный идентификатору его родительского элемента. Я добавил прослушиватель событий к каждому элементу таблицы, чтобы сумма суммировала go вверх по дереву. Код выглядит примерно следующим образом: 

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>

Любые подсказки, пожалуйста?

1 Ответ

0 голосов
/ 07 марта 2020

Эта проблема связана с замыканиями . Вы можете исправить это используя: 

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);
   }());
};
...