用JS再表格中添加表行元素

作者：andy0012019.11.21来源：Web前端之家浏览：10036评论:0

关键词：js table

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>

赏您的支持是我们创作的动力！