jquery 添加行删除行操作

佚名 6年前 (2019-04-09) 随笔 1835人围观抢沙发百度已收录

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

点击添加行选择需要删除行直接上代码

html

<form id="deviation" method="post">
    <table class="table table-bordered table-hover">
        <tbody>
        <tr>
            <td colspan="6" class="infoLine15unBorder columnNameCN">纠正措施</td>
        </tr>
        <tr>
            <td class="infoLine15unBorder columnNameCN">序号</td>
            <td class="infoLine15unBorder columnNameCN">纠正措施内容</td>
            <td class="infoLine15unBorder columnNameCN">责任部门</td>
            <td class="infoLine15unBorder columnNameCN">完成时间</td>
            <td class="infoLine15unBorder columnNameCN">部门经理确认</td>
            <td class="infoLine15unBorder columnNameCN">操作</td>
        </tr>
        <tr id="correction_0">
            <td><input type="text" name="correction[0].serialNumber">
            </td>
            <td><input type="text" name="correction[0].content"></td>
            <td><input type="text" name="correction[0].dept"></td>
            <td><input type="text" name="correction[0].finishDate"
                       class="dateTime"></td>
            <td><input type="text" name="correction[0].deptManager"></td>
            <td><input type="button" value="删除" onclick=delRowcorrection(0)></td>
        </tr>
        <tr id="correction_1">
            <td><input type="text" name="correction[1].serialNumber">
            </td>
            <td><input type="text" name="correction[1].content"></td>
            <td><input type="text" name="correction[1].dept"></td>
            <td><input type="text" name="correction[1].finishDate"
                       class="dateTime"></td>
            <td><input type="text" name="correction[1].deptManager">
            </td>
            <td><input type="button" value="删除" onclick=delRowcorrection(1)></td>
        </tr>
        <tr id="correction_2">
            <td><input type="text" name="correction[2].serialNumber">
            </td>
            <td><input type="text" name="correction[2].content"></td>
            <td><input type="text" name="correction[2].dept"></td>
            <td><input type="text" name="correction[2].finishDate"
                       class="dateTime"></td>
            <td><input type="text" name="correction[2].deptManager">
            </td>
            <td><input type="button" value="删除" onclick=delRowcorrection(2)></td>
        </tr>
        </tbody>
    </table>
    <div class="modal-footer">
        <button type="button" id="submitData" class="btn btn-primary" onclick="addcorrection('correction')">添加行
        </button>
    </div>
</form>


2.js

<script type="text/javascript">

    var correction = 2;

//点击添加行 
    function addcorrection(name) {

 //name的令名方式是当form表单提交的时候 后台接收的会以一个数组的形式呈现 方便数据库插入

        correction++;
        var rowTem = '<tr id="' + name + '_' + correction + '">'
            + '<td><input type="text" name="' + name + '[' + correction + '].serialNumber"/></td>'
            + '<td><input type="text" name="' + name + '[' + correction + '].content"/></td>'
            + '<td><input type="text" name="' + name + '[' + correction + '].dept"/></td>'
            + '<td><input type="text" name="' + name + '[' + correction + '].finishDate" class="dateTime"/></td>'
            + '<td><input type="text" name="' + name + '[' + correction + '].deptManager"/></td>'
            + '<td>  <input type="button" value="删除" onclick=delRowcorrection(' + correction + ')></td>'
            + '</tr>';
        $("tbody tr:last").after(rowTem);//tbody 标签内的最后一行tr下添加
    }

    //删除当前行
    function delRowcorrection(_id) {
        var id = "#correction_" + _id
        $(id).remove();
    }


</script>