jquery - 类未使用 jQuery 附加到按钮

Question

我的桌子上有一个按钮。所以对于添加按钮，我正在尝试将按钮类添加btn-success到它。然后当它在另一个表上更改为Remove时，该类btn-remove

这是我的 jQuery：

var table1 = $('#exclude-table');
    var table2 = $('#include-table');
    table1.on('click', '#AddContractBtn', function () {
        var row = $(this).closest('tr');
        $(this).text('Remove').addClass('btn-danger');
        table2.append(row);
    })
    table2.on('click', '#AddContractBtn', function () {
        var row = $(this).closest('tr');
        $(this).text('Add').addClass('btn-success');
        table1.append(row);
    })

HTML

`<table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
        <thead id="tableHeader">
            <tr>
                <th class="bg-white">Name</th>
                <th class="bg-white">Contract Type</th>
                <th class="hidden-xs bg-white">Start Date</th>
                <th class="hidden-xs bg-white">End Date</th>
                <th class="hidden-xs bg-white">Termination Date</th>
                <th class="hidden-xs bg-white text-center">Action</th>
            </tr>
        </thead>
        <tbody id="exclude-table">
                <tr class=''>
                    <td>
                        Another Contract
                    </td>
                    <td>
                        Neighbouring Rights Agreement
                    </td>
                    <td class="hidden-xs">
                        2018/07/05
                    </td>
                    <td class="hidden-xs">
2018/10/30                  </td>
                    <td class="hidden-xs">
                    </td>
                    <td class="updateTableRow text-center">
                        <button class="btn br2 btn-xs fs12 table-btn" id="AddContractBtn">Add</button>
                    </td>
                </tr>
                <tr class=''>
                    <td>
                        Test Contract
                    </td>
                    <td>
                        Publishing
                    </td>
                    <td class="hidden-xs">
                        2018/07/05
                    </td>
                    <td class="hidden-xs">
2018/09/30                  </td>
                    <td class="hidden-xs">
                    </td>
                    <td class="updateTableRow text-center">
                        <button class="btn br2 btn-xs fs12 table-btn" id="AddContractBtn">Add</button>
                    </td>
                </tr>
        </tbody>
    </table>
</div>

                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">

                                <div class="panel">
                                    <div class="panel-heading">
                                        <span class="panel-title">
                                            <i class="fa fa-usd"></i>&nbsp;Linked
                                        </span>

                                        <div class="widget-menu pull-right mr10">
                                            <input type="text" class="form-control" id="tableSearch" placeholder="Search Contract Name">
                                        </div>
                                    </div>

                                    <div class="panel-body pn">
                                        <fieldset>
                                            <legend style="display: none">Select Contracts Form</legend>

                                            <div class="panel panel-visible mbn" id="tableContainer">
                                                <div id="include-table-scroller">
    <table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
        <thead id="tableHeader">
            <tr>
                <th class="bg-white">Name</th>
                <th class="bg-white">Contract Type</th>
                <th class="hidden-xs bg-white">Start Date</th>
                <th class="hidden-xs bg-white">Termination Date</th>
                <th class="hidden-xs bg-white text-center">Action</th>
            </tr>
        </thead>
        <tbody id="include-table">

        </tbody>
    </table>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
        <div class="text-center">
            <input type="button" class="btn btn-primary" id="CancelForm" value="Cancel" />
            <input type="submit" class="btn btn-primary" id="SubmitForm" value="Create" />
        </div>
    </div>
</article>`

标签： jquery

Answer 1

谢谢您的帮助。我已经这样做了：

    var table1 = $('#exclude-table');
            var table2 = $('#include-table');
            table1.on('click', '#AddContractBtn', function () {
                var row = $(this).closest('tr');
                $(this).text('Remove').addClass('btn-danger');
                table2.append(row);
            })
            table2.on('click', '#AddContractBtn', function () {
                var row = $(this).closest('tr');
                $(this).text('Add').removeClass('btn-danger');
                table1.append(row);
            })