javascript - 单击复选框将表行移动到另一个表

Question

我在使用一些 Javascript 代码时遇到了问题。我尝试了很多方法来解决这个问题，但任何方法都对我有帮助。我只是希望当表 1 中的复选框被选中时，表 1 中的一行显示在表 2 中。然后必须将其从表 1 中删除。

这是我的表 1

<label class="collapse" onclick="toggleTableProduct();" href="#" id="productLabel">ProductBacklog</label>
<input type="checkbox">
<div class="alignButtonAndTable">
    <table id="productTable">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <tr>
            <th class="itemsth">Name</th>
            <th class="itemsth">Description</th>
            <th class="itemsth">Priority</th>
            <th class="itemsth">Time</th>
            <th class="itemsth">Status</th>
            <th class="itemsth">Add to next table</th>
            <th class="itemsth">Remove from list</th>
        </tr>
        <tr>
            <td>Draw cirle</td>
            <td>Radius 5 cm</td>
            <td>
                <select>
                    <option>high</option>
                    <option>medium</option>
                    <option>low</option>
                </select>
            </td>
            <td>20</td>
            <td>ToDo</td>
            <td>
                <input type="checkbox" class="25" id="25" onclick="accept()">
            </td>
        </tr>
    </table>
</div>

这是我的表 2

<label class="collapse" onclick="toggleTableSprint();" href="#">SprintBacklog</label>
<input type="checkbox">
<div class="hidden" id="sprint">
    <table id="sprintTable">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <tr>
            <th class="itemsth">Name</th>
            <th class="itemsth">Description</th>
            <th class="itemsth">Priority</th>
            <th class="itemsth">Time</th>
            <th class="itemsth">Status</th>
            <th class="itemsth">Add to next table</th>
            <th class="itemsth">Remove from list</th>
        </tr>
    </table>
</div>

这是我上次尝试将行从一个表移动到另一个表的代码。

function addRow() {
    if (document.getElementById("25").checked = true) {
        $("#productTable tr").eq(1).insertAfter($("#sprintTable tr").last());
    }
}

希望有人能帮助我。

Answer 1

Javascript 有一些不允许我们使用的热键词，其中之一是函数的“接受”。尝试“接受”:

window.accepted = function() {
        if (document.getElementById("25").checked = true)
        {
            $("#productTable tr").eq(1).insertAfter($("#sprintTable tr").last());
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="collapse" onclick="toggleTableProduct();"
       href="#" id="productLabel">ProductBacklog</label>
<input type="checkbox">
<div class="alignButtonAndTable">
    <table id="productTable">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <tr>
            <th class="itemsth">Name</th>
            <th class="itemsth">Description</th>
            <th class="itemsth">Priority</th>
            <th class="itemsth">Time</th>
            <th class="itemsth">Status</th>
            <th class="itemsth">Add to next table</th>
            <th class="itemsth">Remove from list</th>
        </tr>
        <tr>
            <td>Draw cirle</td>
            <td>Radius 5 cm</td>
            <td>
                <select>
                    <option>high</option>
                    <option>medium</option>
                    <option>low</option>
                </select>
            </td>
            <td>20</td>
            <td>ToDo</td>
            <td>
                <input type="checkbox" class="25" id="25" onclick="accepted()">
            </td>
        </tr>
    </table>
            
            <label class="collapse" onclick="toggleTableSprint();"
       href="#">SprintBacklog</label>
<input type="checkbox">
<div class="hidden" id="sprint">
    <table id="sprintTable">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <tr>
            <th class="itemsth">Name</th>
            <th class="itemsth">Description</th>
            <th class="itemsth">Priority</th>
            <th class="itemsth">Time</th>
            <th class="itemsth">Status</th>
            <th class="itemsth">Add to next table</th>
            <th class="itemsth">Remove from list</th>
        </tr>
    </table>
</div>