美文网首页我爱编程
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