CODEWITHSUNDEEP
javascriptjquery
SuperDJ
SuperDJ

Reputation: 7661

jQuery - Get table cell value

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.

Upvotes: 1

Views: 14049

Answers (4)

IfThenElse
IfThenElse

Reputation: 509

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

Upvotes: -1

Irvin Dominin
Irvin Dominin

Reputation: 30993

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

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6955

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

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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

Upvotes: 1

Related Questions