Question

我的视图中有两个表，我想一种在表中添加和删除数据的方法。当前，这是我的部分视图和添加表：

<div id="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">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 class="scrollable">
        @foreach (var contract in Model.Contracts)
        {
            var rightNow = DateTime.UtcNow;
            var classValue = "";
            if (contract.Selected)
            {
                classValue = "selected";
                if (contract.TerminationDate != default(DateTime?))
                {
                    classValue += contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
                }
            }
            else
            {
                if (contract.TerminationDate != default(DateTime?))
                {
                    classValue = contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
                }
            }
            <tr class='@classValue'>
                <td>
                    @contract.Name
                </td>
                <td>
                    @contract.ContractTypeDescription
                </td>
                <td class="hidden-xs">
                    @contract.From.ToString("yyyy/MM/dd")
                </td>
                <td class="hidden-xs">
                    @if (contract.To != default(DateTime?))
                    {
                        @contract.To.Value.ToString("yyyy/MM/dd")
                    }
                </td>
                <td class="hidden-xs">
                        @if (contract.TerminationDate != default(DateTime?))
                        {
                            @contract.TerminationDate.Value.ToString("yyyy/MM/dd")
                        }
                </td>
                <td class="updateTableRow text-center">
                    <input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
                </td>
            </tr>
        }
    </tbody>
</table>

我想要这样，以便当您单击“添加”按钮时，它将被传递到此表：

<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">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 class="scrollable">
        @foreach (var contract in Model.Contracts)
        {
            var rightNow = DateTime.UtcNow;
            var classValue = "";
            if (contract.Selected)
            {
                classValue = "selected";
                if (contract.TerminationDate != default(DateTime?))
                {
                    classValue += contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
                }
            }
            else
            {
                if (contract.TerminationDate != default(DateTime?))
                {
                    classValue = contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
                }
            }
            <tr class='@classValue'>
                <td></td>
                <td></td>
                <td class="hidden-xs"></td>
                <td class="hidden-xs"></td>
                <td class="hidden-xs"></td>
                <td class="updateTableRow text-center">
                    <input type="button" class="btn btn-danger btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Remove" />
                </td>
            </tr>
        }
    </tbody>
</table>
</div>

然后，如果我选择“删除”，则将包传递给“添加”表。我不确定哪种方法是最好的使用方法，无论是使用JQuery之类的方法还是使用C＃更好的方法。

Answer 1

重复的id属性是无效的html，因此请从按钮中将其删除（改为使用类名）

您可以通过处理<tr>事件，然后使用

，将与该按钮关联的.click()移动到另一个表

var row = $(this).closest('tr'); // get the tr element
otherTable.append(row); // move it to the other table

给每个<tbody>一个id属性，并为按钮指定一个类名（例如）class="move"。由于行将在表之间动态移动，因此您需要使用事件委托（.on函数）来处理.click()事件

<table>
    <thead> ... </thead>
    <tbody id="include">
        <tr>
            ....
            <td><input type="button" class="move ..." value="Move" /></td>
        </tr>
        .... // more <tr> elements
    </tbody>
</table>
<table>
    <thead> ... </thead>
    <tbody id="exclude">
        ....
    </tbody>
</table>

然后添加以下脚本

var include = $('#include');
var exclude = $('#exclude');
include.on('click', '.move', function(){
    var row = $(this).closest('tr');
    exclude.append(row);
});
table2.on('click', '.move', function(){
    var row = $(this).closest('tr');
    include.append(row);
});

请注意，如果您希望每个表中的按钮显示不同的文本，则可以在.click处理程序中使用$(this).text('Remove');进行更改（将文本设置为“删除”）

请参考this fiddle作为工作示例。

从一个表向另一个表添加和删除数据-jQuery

1 个答案: