juery动态添加删除表格中的行

最新推荐文章于 2024-08-14 15:45:18 发布

chusouzhan3724

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量122

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1187531/blog/552302

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <table class="table-bordered col-sm-8" id="menuActions">
        <thead>
            <tr>
                <th>编码</th>
                <th>名称</th>
                <th>功能（正则表达式）</th>
            </tr>
        </thead>
        <tbody>
        
            <tr>
                <td><input type="text" name="" value="add" /></td>
                <td><input type="text" name="" value="新增" /></td>
                <td><input type="text" name="" value="add" /></td>
                <td><button>删除</button></td>
            </tr>
        
            <tr>
                <td><input type="text" name="" value="update" /></td>
                <td><input type="text" name="" value="修改" /></td>
                <td><input type="text" name="" value="update" /></td>
                <td><button>删除</button></td>
            </tr>
            <tr>    
                <td colspan="4"><button id="addMenuActions">添加</button></td>
            </tr>
        </tbody>
    <table>
</body>
<script type="text/javascript" src="/static/js/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#addMenuActions").click(function(){
        var newLine = "<tr><td><input class=\"form-control\" type=\"text\"/></td><td><input class=\"form-control\" type=\"text\"/></td><td><input class=\"form-control\" type=\"text\" /></td><td><button class=\"removeMenuActions\">删除</button></td></tr>";
        $(this).parent().parent().before(newLine);
    });
    $("#menuActions").on('click', ".removeMenuActions", function(){
        $(this).parent().parent().remove();
    });
});
</script>
</html>

演示地址：http://www.jupitercode.com/demo/js/table/dynamicrow.html

转载于:https://my.oschina.net/u/1187531/blog/552302