Добавить и удалить данные из одной таблицы в другую - Jquery

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'); (для установки текста на «Удалить»)

См. эту скрипку для рабочего примера.