从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>

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

$("#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++;
        }        
});

这将正确地触发，并且我可以迭代"updated“列的每一行，但是当我执行警告( "value "+ t )时，它总是为警告消息中的t打印null。即”value“。

例外的是第一列，如果我使用"1“作为变量col，那么它会打印出迭代列的值，就像你所期望的那样。但我假设由于其他列是可编辑的，即呈现为"html-input tag“，所以无法获取值？

当我检查页面时，这里是如何呈现行的：

<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>

因此，您的value位于该输入元素内部。你必须进入那里。

因此，将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。希望这能有所帮助。