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() .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分隔该表格。

获取表td中的输入值

1 个答案: