jQuery - Get table cell value

Question

I have a table which looks like the following. The price normally comes from a database this is just for showing the problem I have.

$(document).ready(function() {
    $(document).delegate('.amount input[type="text"]','keyup',(function() {
        var $this = $(this);
        var sub_total = $this.find('.sub_total');
        var price = $this.find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
      <td><input type="text" name="tickets" id="tickets" class="amount" maxlength="2" autocomplete="off"></td>
      <td>Ticket:</td>
      <td class="price">20,50</td>
      <td class="sub_total"></td>
  </tr>
</table>

What I would like to do is: when the user types a number in the field tickets it should update the field sub_total. With the jQuery I have this is not working. When I alert(price) I get undefined. So I wonder how to make the sub_total field with auto updated values. It might also be interesting to know that I have more rows like this beneath this row. So the script should only update the field from one specific row at a time.

What I already tried but without success: How to get a table cell value using jQuery; How to get a table cell value using jQuery?; How to get table cell values any where in the table using jquery

Thanks in advance.

Use `'input[type="text"].amount'` instead of `'.amount input[type="text"]'` notice space is removed — Satpal, Sep 10 '14 at 11:20

score 2 · Accepted Answer · answered Sep 10 '14 at 11:22

You need to do traverse back up to the parent tr element before you try to find the .sub_title or .price elements.

$(document).ready(function() {
    $(document).delegate('.amount input[type="text"]','keyup',(function() {
        var $this = $(this);
        var $tr = $this.closest("tr");
        var sub_total = $tr.find('.sub_total');
        var price = $tr.find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

score 1 · Answer 2 · answered Sep 10 '14 at 11:21

Change you code like this

$(document).ready(function() {
    $(document).on('input[type="text"].amount', 'keyup', (function() {
        var $this = $(this);
        var sub_total = $this.closest("tr").find('.sub_total');
        var price = $this.closest("tr").find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

find() will search for the children. So you should get into the parent tr first before using find().

You can use closest("tr") to get the parent tr element

score 0 · Answer 3 · answered Sep 10 '14 at 11:24

It's because price and sub_total are not children of the current element (as find is selecting):

var sub_total = $this.find('.sub_total');
var price = $this.find('.price').text();

they are siblings of its parent or more simply children of the container tr.

Try instead:

var sub_total = $this.closest('tr').find('.sub_total');
var price = $this.closest('tr').find('.price').text();

score -1 · Answer 4 · answered Aug 16 '16 at 07:31

-1

example for a

<table id="#myTable">

I write this:

function setCell( idTab, row, col, text) {
  var idCel = idTab + " tbody tr:nth-child(" + row + ") td:nth-child(" + col + ")";
  $(idCel).html(text);
}

function getCell( idTab, row, col ) {
  var idCel =idTab + " tbody tr:nth-child(" + row + ") td:nth-child(" + col + ")";
  return $(idCel).html();
}

setCell( "#myTab", 3, 4, "new value" );
alert( getCell("#myTab", 3, 4);

answered Aug 16 '16 at 07:31

IfThenElse

485
5
13

As you can see the question is already 2 years old and was already answered then. These functions also aren't general enough to solve the problem I had. – SuperDJ Aug 16 '16 at 09:13

jQuery - Get table cell value

4 Answers4