javascript - 从 HTML 表中的可编辑列获取值

Question

我有一个 HTML 表格，其中包含可编辑的列。如果表有 5 行，用户将逐行更新 col1 的所有行，然后逐行更新 col2 的所有行等。当用户更新 col1 中的值时，我需要获取新值并放入将它们放在一个数组中并对这些值进行一些计算。因此，例如，当用户位于第 1 行 col1 时，数组将有一个元素，当用户编辑 col1 的第 2 行时，数组将有 2 个元素，等等。

这是我的表格:

<table id="myGrid" class="table table-bordered table-striped">
    <tr>
       <th>Iteration</th>
       <th class="CalCol1" id="CalColHdr1">Vol1</th>
       <th class="CalCol2" id="CalColHdr2">Vol2</th>
       <th class="CalCol3" id="CalColHdr3">Vol3</th>
       <th class="CalCol4" id="CalColHdr4">Vol4</th>
       <th class="CalCol5" id="CalColHdr5">Vol5</th>
    </tr>
    @foreach (var item in Model.Volumes)
    {
       <tr>
          <td >@Html.DisplayFor(modelItem => item.RunNumber)</td>
          <td class="CalCol1">@Html.EditorFor(modelItem => item.Column1)</td>
          <td class="CalCol2">@Html.EditorFor(modelItem => item.Column2)</td>
          <td class="CalCol3">@Html.EditorFor(modelItem => item.Column3)</td>
          <td class="CalCol4">@Html.EditorFor(modelItem => item.Column4)</td>
          <td class="CalCol5">@Html.EditorFor(modelItem => item.Column5)</td>
       </tr>
    }
</table>

我有一个更改函数，当用户更改列中的值时会触发该函数:

$("#myGrid   tr   td").change(function (e) {
    var value = e.innerHTML;
    var i = 0;
    var col = $(this).parent().children().index($(this)) ;
    var row = $(this).parent().parent().children().index($(this).parent());
    col++ ;
    alert('Row: ' + row + ', Column: ' + col + ' value:' + value);
    var vals = new Array();

    // This gets all rows for the specified column, excluding a "hidden"row at position 1
    $("#myGrid tr:gt(1) td:nth-child("+col+")").each(function() {
        var t = $(this).html();
        alert("value " + t);
        if($.inArray(t, vals) < 0)
        {
            vals[i]=t;
            i++;
        }        
});

这会正确触发，我可以迭代“更新”列的每一行，但是当我执行警报时(“值”+ t);它总是为 t 打印 null 。即警报消息中的“值”。

异常(exception)是第一列，如果我使用“1”作为变量 col，那么它会打印出迭代列的值，就像您期望的那样。但我假设由于其他列是可编辑的，即呈现为“html-input 标签”，因此它无法获取值？

当我检查页面时，该行是如何呈现的:

<tr>

  <td >1</td>
  <td class="CalCol1"><input class="text-box single-line" id="item_Column1" name="item.Column1" type="text" value="" /></td>
  <td class="CalCol2"><input class="text-box single-line" id="item_Column2" name="item.Column2" type="text" value="" /></td>
  <td class="CalCol3"><input class="text-box single-line" id="item_Column3" name="item.Column3" type="text" value="" /></td>
  <td class="CalCol4"><input class="text-box single-line" id="item_Column4" name="item.Column4" type="text" value="" /></td>
  <td class="CalCol5"><input class="text-box single-line" id="item_Column5" name="item.Column5" type="text" value="" /></td>
</tr>

如何获取用户在表中所有行的可编辑列中输入的值？

Answer 1

使用 razor 和 Jquery 有点不同。

如果您检查所创建单元格的 HTML DOM 元素，您可以看到创建了全新的 input 元素。

<td class="CalCol1">
  <input class="text-box single-line" data-val="true" data-val-number="The field          Colunm1 must be a number." data-val-required="The Colunm1 field is required." id="item_Colunm1" name="item.Colunm1" type="number" value="3453">
</td>

因此您的值位于该输入元素内。你必须访问那里。

将 DOM 对象传递给循环，如下所示 .each(function (item, element)

然后获取每个输入元素的值。

这是完整的代码。

<script type="text/javascript">
        $("#myGrid tr td").keyup(function (e) {
            var value = e.key;
            var i = 0;
            var col = $(this).parent().children().index($(this));
            var row = $(this).parent().parent().children().index($(this).parent());
            col++;
           // alert('Row: ' + row + ', Column: ' + col + ' value:' + value);
            var vals = new Array();

            // This gets all rows for the specified column, excluding a "hidden"row at position 1
            $("#myGrid tr:gt(1) td:nth-child(" + col + ")").each(function (item, element) {
                var t = $(this).value;
                var inputs = element.firstChild;
                var cellValue = $(inputs)[0].value;

                if ($.inArray(cellValue, vals) < 0) {
                    vals[i] = cellValue;
                    i++;
                }
            });

            console.log(vals);
        });
    </script>

我使用了keyup事件而不是change。 希望这可以帮助。