通过JQuery获取嵌套在表中的HTML助手元素和日期选择器的值

我有一个表格，用用户和一个数字步进器（

@Html.EditorFor

）以及一组日期选择器填充每一行。当我尝试将数字步进器和日期字段的值传递到数组中时，它看起来不像是获取用户名的值，而用户名只是文本。有什么建议吗

MVC局部视图代码（表代码）：

@foreach (var x in Model.Team)
{
    <tr class="">
        <td>@Html.DisplayFor(modelItem => x.UserFullName)</td> @*Column 0*@
        <td>@Html.EditorFor(modelItem => x.CurrentTicketLevel, "", new { htmlAttributes = new { type = "number", min = 6, max = 110, @class = "form-control", @style = "width:70px;", @id = "TicketCounts" } })</td> @*Column 1*@

        <td class="StartDateField" id="StartDateField">
            @*Column 3*@
            <div class="input-group">
                <span title="Select Start Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span>
                @Html.EditorFor(modelItem => x.StartDate, "", new { htmlAttributes = new { @class = "startdate form-control", @id = "UStartDateField", @style = "width:120px" } })
            </div>
        </td>

        <td class="EndDateField" id="EndDateField">
            <div class="input-group">
                <span title="Select End Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span>
                @Html.EditorFor(modelItem => x.EndDate, "", new { htmlAttributes = new { @class = "enddate form-control", @id = "UEndDateField", @style = "width:120px" } })
            </div>
        </td>
    </tr>
}

---

在

console.log输出的第一行

，

票证：

应该有

100

，

StartDate:

应该有

2017年9月20日

，来自

.text（）

方法不能用于表单输入或脚本。要设置或获取输入或textarea元素的文本值，请使用

.val（）

方法

那么换成,

$('#memberTable tr').each(function (row, tr) {
    TableData[row] = {
        "RepID": $(tr).find('td:eq(0) input').val() + ' ' //RepID
        , "Tickets": $(tr).find('td:eq(1) input').val() + ' ' //Ticket Count
        , "StartDate": $(tr).find('td:eq(2) input').val() + ' ' //StartDate
        , "EndDate": $(tr).find('td:eq(3) input').val() + ' ' //EndDate
    } //End of TableData[row]

});//End each function

一些注意事项：

• id

  在HTML页面中应该是唯一的。循环时，不要手动分配id。如果有3行，则有3个输入元素具有相同的

  id

  。当您要针对特定元素时，这将导致不希望的行为。例如：尝试执行

  $（“#TicketCounts”）.val（100）

  。这将只更新第一行的票证计数，而不是所有行
• 因此，您应该为每个输入元素添加一个唯一的类，并且应该订阅该元素的更改事件。 例如：

  $（“.startdate”）.change（function（）{

  。这将触发所有开始日期更改
• 在循环和创建表单元素（如输入）时，应使用

  for

  循环，而不是

  foreach

  。如果要提交此表单，您的

  团队

  列表将为空
• 我假设您在

  中得到标题
  tr
  。每个
  都是这样，这就是为什么您要执行
  .shift（）
  。而不是这样，而是将行包装在
  tbody
  中，然后
  $（'#memberTable tbody tr'）。每个（函数（行，tr）{
  。这将只获取正文行，而不获取标题

---

我们可以看到编辑器生成的HTML吗？在使用.find（'td:eq选择器）时，您可能需要更具体地使用这些字段。

$('#memberTable tr').each(function (row, tr) {
    TableData[row] = {
        "RepID": $(tr).find('td:eq(0) input').val() + ' ' //RepID
        , "Tickets": $(tr).find('td:eq(1) input').val() + ' ' //Ticket Count
        , "StartDate": $(tr).find('td:eq(2) input').val() + ' ' //StartDate
        , "EndDate": $(tr).find('td:eq(3) input').val() + ' ' //EndDate
    } //End of TableData[row]

});//End each function