将表格行移动到单击复选框上的另一个表格

时间:2015-06-02 07:49:33

标签: javascript html html-table tablerow

我遇到一些Javascript代码有问题。我已经尝试了很多方法来解决它,但任何事情都帮助了我。 我只是希望表1中的一行显示在表2中,当表1中的复选框被选中时,它必须从表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());
    }
}

希望有人可以帮助我。

1 个答案:

答案 0 :(得分:0)

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>

相关问题