jQuery-获取表单元格值

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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