get input values inside a table td

Question

I have table with a button as following; I'm trying to get the values of td's using jQuery.

My table:

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

then I'm trying to get the value using 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);
    });

});

but I'm not getting any values.

I also tried something like this but it doesn't work either:

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

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

Answer 1

The issue is due to your DOM traversal logic. Firstly this is the tr element, so closest('tr') won't find anything. Secondly, you're getting the string value from the text() of .keyvalue, then attempting to find an input element in the text instead of traversing the DOM. Finally, you need to use val() to get the value of an input.

I'd strongly suggest you familiarise yourself with the methods jQuery exposes and how they work: http://api.jquery.com

With all that said, this should work for you:

$('#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>

Note that the first value is undefined as your th element in the first row contains no input element. I'd suggest separating the table using thead/tbody if you want to exclude that row.