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);
});

Solution

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.

Comments

[Kelum]

wht happen if i have multiple input inside single <td>

[Rory McCrossan]

Then you would need to select the input you require specifically - by id or class for example

[Rory McCrossan]

var keval = $(this).find(".keyvalue .your-input-class-here").val();

[Kelum]

I put like this to avoid undefined thing but <table> <thead> <tr> <th> </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> </td> </tr> } </tbody> </table> its still there

[Rory McCrossan]

In that case change $('#Tablesample tr') to $('#Tablesample tbody tr'). I'd suggest you research how selectors work too. For reference it's the same pattern that CSS uses

[Kelum]

thnks lot its helps

[Love Putin]

@RoryMcCrossan- Instead of traversing thru' all the trs of a table, how can we get the value from a td using its ID? If I use $('#Tablesample tr').each(function() {...}); it runs thru' the entire gamut of rows and on finding the right ID, spits out the value (correctly). Instead of that, can I get the value straight off the cell's ID?

[Rory McCrossan]

Of course. Just use a standard id selector as you would on any other element in jQuery

[Love Putin]

@RoryMcCrossan - I have over a thoiusand rows in a table with some of the cells (inputs) blank. How do I approach picking out those elements? Is it really possible to only hit those empty cells without looping thru' each of the rows?

[Rory McCrossan]

It's impossible to tell the exact context of the problem without seeing the code. I'd suggest starting a new question. However I would suggest that having over 1000 rows in a page is a little too much. You should perhaps look in to a paging and filtering system