首页jquery table 动态加表头

jquery table 动态加表头

时间: 2023-08-04 21:06:50 浏览: 217

你可以使用jQuery来动态添加表头。首先，你需要创建一个表格，并在表格中添加一个表头行。然后，使用jQuery的`append()`方法来动态向表头行中添加表头单元格。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <thead> <tr id="headerRow"> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> </tbody> </table> <button id="addHeaderBtn">添加表头</button> <script> $(document).ready(function() { $("#addHeaderBtn").click(function() { var newHeader = $("<th>新列</th>"); $("#headerRow").append(newHeader); }); }); </script> </body> </html> ``` 在上面的示例中，我们首先创建了一个带有固定表头的表格。然后，在页面加载完成后，通过点击按钮来触发添加表头的操作。当点击按钮时，jQuery会创建一个新的表头单元格，并将其添加到表头行中。你可以根据需要修改示例代码，并根据自己的要求进行定制。希望能对你有所帮助！

阅读全文