获取表中的输入值 td

Question

我有一个带有按钮的表格，如下所示；我正在尝试使用 jQuery 获取 td 的值。

我的表：

<table class="table" id="Tablesample">

    <tr>
        <th style="display:none;">
            @Html.DisplayNameFor(model => model.Id)
        </th>

    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td style="display:none;" class="keyvalue">
                <input type="text" name="Key" value="@item.Key" class="form-control" id="configKey" readonly="readonly">
            </td>
            <td>
                <input type="text" name="Key" value="@item.Id" class="form-control" id="configId" readonly="readonly">
            </td>
        </tr>

    }

</table>

<button id="btnSave">Save</button>

然后我尝试使用 jquery 获取值：

$('#btnSave').click(function () {

    $('#Tablesample tr').each(function () {

        var row = $(this).closest("tr");    // Find the row
        var text = row.find(".keyvalue").text(); // Find the text
        var keval = text.find("input").text();

        alert(keval);
    });

});

但我没有得到任何价值。

我也尝试过这样的事情，但它也不起作用：

$("#Tablesample tr:gt(0)").each(function () {

    var this_row = $(this);
    var key = $.trim(this_row.find('td:eq(0)').html());
    alert(key);
});

Answer 1

问题是由于您的 DOM 遍历逻辑。首先this是tr元素，所以closest('tr')不会找到任何东西。其次，您从text()of获取字符串值.keyvalue，然后尝试input在文本中查找元素而不是遍历 DOM。最后，您需要使用val()来获取输入的值。

我强烈建议您熟悉 jQuery 公开的方法及其工作原理：http : //api.jquery.com

综上所述，这应该适合您：

$('#btnSave').click(function() {
  $('#Tablesample tr').each(function() {
    var keval = $(this).find(".keyvalue input").val();
    console.log(keval);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="Tablesample">
  <tr>
    <th style="display:none;">
      Model
    </th>
  </tr>
  <tr>
    <td style="display:none;" class="keyvalue">
      <input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly">
    </td>
    <td>
      <input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly">
    </td>
  </tr>
  <tr>
    <td style="display:none;" class="keyvalue">
      <input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly">
    </td>
    <td>
      <input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly">
    </td>
  </tr>
  <tr>
    <td style="display:none;" class="keyvalue">
      <input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly">
    </td>
    <td>
      <input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly">
    </td>
  </tr>
</table>

<button id="btnSave">Save</button>

请注意，第一个值是undefined因为th第一行中的input元素不包含任何元素。如果您想排除该行，我建议使用thead/分隔表格tbody。