如何使用.val（）从表中获取最后一行数据，并使用jquery在警报中显示它？

Question

This is my script code.

 $(document).ready(function() { $(".add-row").click(function() { var name = $("#name").val(); var markup = "<tr><td>" + name + "</td></tr>"; $("table tbody").append(markup); }); $(".bttn").click(function() { var i = $("#tab").find("tr").last().val(); alert(i); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table id="tab"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td> </tr> </tbody> </table> <button type="button" class="delete-row">Delete Row</button> <button type="button" class="bttn">show Row</button> 

I have a table in which it adds rows when "add row" button is clicked. Every time if I press "show row" button, the last row data should be shown in alert prompt. How to do that using Jquery?

Answer 1

You need to use .text() as TR element doesn't have value property.

$("#tab").find("tr").last().text()

 $(document).ready(function() { $(".add-row").click(function() { var name = $("#name").val(); var markup = "<tr><td>" + name + "</td></tr>"; $("table tbody").append(markup); }); $(".bttn").click(function() { var i = $("#tab").find("tr").last().text().trim(); alert(i); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table id="tab"> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td> </tr> </tbody> </table> <button type="button" class="delete-row">Delete Row</button> <button type="button" class="bttn">show Row</button> 

Answer 2

with .val() you can't achieve this because .val() works with input field, and for getting innerHTML you have to use .text()

You can print any of row/column content using this

var value= $("#tab tr:eq(2) td:eq(4)").text();
alert(value)

and for last row use:

alert($('#tab tr:last').text());