jQuery可用于动态添加表行。这可以在web应用程序中使用,如果需要,用户可以根据需要添加很多行。
使用jQuery在表中添加表行的步骤:
构造表行所需的标签
markup = "<tr><td> + information + </td></tr>"
选择要添加表行的表体
tableBody = $("table tbody")
将标签添加到表体中
tableBody.append(markup)
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> table { margin: 25px 0; width: 200px; } table th, table td { padding: 10px; text-align: center; } table, th, td { border: 1px solid; } </style> </head> <body> <p>单击按钮,向表中添加一行</p> <button class="add-row">添加表行</button> <table> <thead> <tr> <th>表行</th> </tr> </thead> <tbody> <tr> <td>这是第0行</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> let lineNo = 1; $(document).ready(function () { $(".add-row").click(function () { markup = "<tr><td>这是第" + lineNo + "行</td></tr>"; tableBody = $("table tbody"); tableBody.append(markup); lineNo++; }); }); </script> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: