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

我有一个包含可编辑列的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++;
        }        
});

这将正确触发，我可以遍历每一行以获得更新的列，但当我执行alertvalue+t时；它总是为t打印空值。i、 e警报消息中的值

例外情况是第一列，如果我对变量col使用1，那么它会像您期望的那样打印迭代列的值。但我假设，由于其他列是可编辑的，即呈现为html输入标记，因此无法获取值

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

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

---

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

使用razor和Jquery有点不同

如果检查已创建单元格的HTMLDOM元素，您可以看到整个新输入元素已创建

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

我用keyup事件代替了change。 希望这有帮助

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