jquery 实现 table 添加到第一行，删除最后一行

jQuery表格操作技巧

最新推荐文章于 2023-08-31 19:54:35 发布

原创最新推荐文章于 2023-08-31 19:54:35 发布 · 9.2k 阅读

4 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

112 篇文章

订阅专栏

本文介绍了一种使用jQuery操作表格的方法，具体实现包括如何获取输入框的值并将其添加到表格中，同时确保表格中的行数不超过设定的最大值。通过简单的代码示例，展示了如何将数据插入到表格的第一行，并在行数超出限制时移除多余的行。

         var Sn = $("#txtSN").val();
         var SkuCode = $("#txtSkuCode").val();      
                    
                    var row = "<tr>" +
                                   "<td>" +  SkuCode + "</td>" +
                                   "<td>" +  Sn      + "</td>" +
                              "</tr>";                                
                    console.log(row)                                                                                                                                                                           
                   //添加数据到 table 第一行                   
                    $("#tbScanData tbody").prepend(row);

                    //超过三行则删除最后一行
                    
                    var len = $("#tbScanData tr").length;
                    console.log(len)
                    if (len > 4) {
                        $("#tbScanData tr:last").remove();
                    }