juery動態添加刪除表格中的行

時間 2019-11-10

標籤 juery 動態添加刪除表格简体版

原文原文鏈接

<!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.htmljavascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。