Question

我想在table1上添加一行到table2。在table2中，我在第1列有一个复选框控件，因此我想将table1中的行附加到第2列开始的table2中。

这是我当前正在使用的一段jQuery代码

$(".MatchedTransctions tbody tr").click(function () {
  $(this).clone().appendTo("#SelectedForProcessing tbody").closest('tr').children('td').eq(1);
});

下面是两个表。我正在尝试从第一张表插入一行到第二张表，但从table2的第二列开始

<div id="MatchedTransctions" class="MatchedTransctions">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Region)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Person)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Item)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Units)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.UnitCost)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Total)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AddedOn)
                </th>
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tbody>
                <tr onclick="toggleClass(this,'selected');">
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Region)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Person)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Item)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Units)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.UnitCost)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Total)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.AddedOn)
                    </td>
                </tr>
            </tbody>
        }
    </table>
</div>
<table class="table" id="SelectedForProcessing">
        <thead>
            <tr>
                <th>
                    Select Record
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Region)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Person)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Item)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Units)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.UnitCost)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Total)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AddedOn)
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" id="SelectedItem" class="SelectedItem" />
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

Answer 1

这里是如何执行此操作的示例。

请注意，我从末尾删除了两个td，因此该示例将不会结束。

$("#MatchedTransctions tbody tr").click(function () {
  var $row = $(this).clone();
  var $td = $('<td />');
  $row.prepend($td);
  $row.appendTo("#SelectedForProcessing tbody");
});

#MatchedTransctions{background:lightpink;padding:10px 0;}
#SelectedForProcessing{margin:10px 0;}
td{border:1px solid #ccc;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="MatchedTransctions" class="MatchedTransctions">
    <table class="table">
        <thead>
            <tr>
                <th>
                    model.Id
                </th>
                <th>
                    model.Region
                </th>
                <th>
                    model.Person
                </th>
                <th>
                    model.Item
                </th>
                <th>
                    model.Units
                </th>
                <th>
                    model.UnitCost
                </th>
            </tr>
        </thead>
            <tbody>
                <tr onclick="toggleClass(this,'selected');">
                    <td>
                        item.Id
                    </td>
                    <td>
                        item.Region
                    </td>
                    <td>
                        item.Person
                    </td>
                    <td>
                        item.Item
                    </td>
                    <td>
                        item.Units
                    </td>
                    <td>
                        item.UnitCost
                    </td>
                </tr>
            </tbody>
    </table>
</div>
<table class="table" id="SelectedForProcessing">
        <thead>
            <tr>
                <th>
                    Select Record
                </th>
                <th>
                    model.Id
                </th>
                <th>
                    model.Region
                </th>
                <th>
                    model.Person
                </th>
                <th>
                    model.Item
                </th>
                <th>
                    model.Units
                </th>
                <th>
                    model.UnitCost
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" id="SelectedItem" class="SelectedItem" />
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

如何追加记录以从特定列开始？

1 个答案: