美文网首页我爱编程
jquery动态新增/移除表格行

jquery动态新增/移除表格行

作者: 瓜尔佳_半阙 | 来源:发表于2018-05-16 11:26 被阅读32次

    html代码,select标签部分用到了angular的循环,不用angular的可以正常写option即可。

    <table class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>协调部门</th>
                                    <th>协调工作内容</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="assistDeptTableId">
                                <tr class="odd gradeX">
                                    <td>
                                        <label>
                                            <select class="form-control assist-dept-select" name="assistDepartment">
                                                <option *ngFor="let adl of assistDepartmentList"
                                                        value="{{adl.departmentId}}">
                                                    {{adl.departmentName}}
                                                </option>
                                            </select>
                                        </label>
                                    </td>
                                    <td>
                                        <label>
                                            <input class="form-control assist-dept-content" type="text"
                                                   placeholder="请输入协调内容"/>
                                        </label>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-success btn-xs btn-add assist-add">
                                            新增
                                        </button>
                                        <button type="button" class="btn btn-danger btn-xs btn-rm assist-rm">
                                            移除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
    

    下面是typescript代码,把声明变量的let 换成var即可完全用于javascript

    /**
         * 新增表格行
         */
        addTableRow(e: any) {
            $('.btn-add').off("click");
            $('.btn-rm').off("click");
            let button = $(e);
            let srcCode = `<tr>`;
            let srcId = '';
            button.each(function (i: any, item: any) {
                srcId = $(item).parent().parent().parent()[0].id;
                srcCode += $(item).parent().parent()[0].innerHTML;
            });
            srcCode += `</tr>`;
            $('#' + srcId).append(srcCode);
            let rmButton = $('#' + srcId).find("tr:last td:last button:last");
            let tr = $('#' + srcId).find("tr");
            if (tr.length > 1) {
                let buttonClass = "." + rmButton[0].className.replace(/ /g, ".");
                $(buttonClass).removeAttr("disabled");
                let this_ = this;
                $('.btn-add').click(function () {
                    this_.addTableRow(this);
                });
                $('.btn-rm').click(function () {
                    this_.removeTableRow(this);
                });
            }
        }
    /**
         * 移除表格行
         */
        removeTableRow(e: any) {
            let button = $(e);
            let srcId = '';
            button.each(function (i: any, item: any) {
                srcId = $(item).parent().parent().parent()[0].id;
            });
            button.parent().parent().remove();
            let rmButton = $('#' + srcId).find("tr:last td:last button:last");
            if ($('#' + srcId).find("tr").length <= 1) {
                $(rmButton[0]).attr("disabled", "true");
            }
        }
    

    相关文章

      网友评论

        本文标题:jquery动态新增/移除表格行

        本文链接:https://www.haomeiwen.com/subject/zqcpdftx.html