jQuery เพิ่มแถว tr td ในตาราง ด้วยคำสั่ง after

jQuery เพิ่มแถว tr td ในตาราง ด้วยคำสั่ง after ร่วมกับการเลือก element ด้วย tr:last บทความนี้สอนการเขียนโค้ดเพิ่มแถว tr td แบบอัตโนมัติจากการกดคลิกของผู้ใช้งานลงในตารางที่ต้องการ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery เพิ่มแถว tr td ในตาราง ด้วยคำสั่ง after

<table border="1" width="25%" id="table_data">
    <tr><td align="center"><b>ลำดับ</b></td></tr>
</table>
<input type="button" value="เพิ่มแถว" id="insert">

<script>
    let no = 1;
    $("#insert").click(function(){
        $("#table_data tr:last").after("<tr><td align='center'>"+no+"</td></tr>");
        no++;
    });
</script>

jQuery เพิ่มแถว tr td ในตาราง เมื่อผู้ใช้งานกดปุ่ม โปรแกรมจะเข้าไปทำงานในฟังก์ชัน $("#insert").click จากนั้นอ้างถึง tr สุดท่ายของตารางที่มี element id เท่ากับ table_data ด้วย $("#table_data tr:last") จากนั้นใช้คำสั่ง after เพื่อเพิ่มแถว tr td พร้อมตัวเลขจากตัวแปร no เมื่อเพิ่มแถว tr td เสร็จแล้วให้ตัวแปร no บวกตัวเองเพิ่ม 1 เพื่อรอแสดงผลในรอบถัดไป