如何使用jQuery在表中添加表行?

jQuery可用于动态添加表行。这可以在web应用程序中使用,如果需要,用户可以根据需要添加很多行。下面本篇文章就来给大家介绍一下使用jQuery在表中添加表行的方法,希望对大家有所帮助。

使用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>

效果图:

1.gif

以上就是如何使用jQuery在表中添加表行?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏