如何使用JS/HTML将一行的一部分从一个表转移到另一个表,并使用onClick删除其余的?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (134)

我有两个表格-“老友记”和“生存之友”。addokie表在第四列中有一个按钮,当单击该按钮时,应从该表中删除相应的行,并将其添加到现有之友表中。

现在,我的代码删除整个行(更正)并将其移动到另一个表(正确),但它包含了按钮,我不希望它这样做。

代码:

HTML

<body>
    <h1>Your Friends</h1>
    <div class="mx-auto" style="width: 700;">
        <table id="existingFriends" class="table table-striped table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Office</th>
                    <th scope="col">Friend Level</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dwayne 'The Rock' Johnson</td>
                    <td>Dallas></td>
                    <td>Top Dog/BFF</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h1>Suggested Friends</h1>
    <div class="table-container" style="width:500;" align="center;">
        <table id="addFriends" class="table table-striped table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Office</th>
                    <th scope="col">Friend Level</th>
                    <th scope="col">Add</th>
                </tr>
            </thead>
            <tbody>
                <tr id="ryan">
                    <td>Ryan Reynolds</td>
                    <td>Dallas</td>
                    <td>Acquaintance</td>
                    <td>
                        <a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(); putBack();">
                            <i class="fas fa-check-square"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

JS

<script language="javascript">
        var row = document.getElementById("ryan");
        function shiftFunc() {
            row.parentNode.removeChild(row);
        }
        function putBack() {
            var tbl = document.getElementById("existingFriends");
            tbl.appendChild(row);
        }
    </script>
提问于
用户回答回答于

你可以给带有Add按钮的表单元格一个类,这样就可以使用查询选择器选择它并删除它。

要使添加按钮更加动态,你应该传递this作为函数和集合的参数row就像parentNodeparentNode,因此该函数将工作在多行。

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

    <h1>Your Friends</h1>
    <div class="mx-auto" style="width: 700;">
        <table id="existingFriends" class="table table-striped table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Office</th>
                    <th scope="col">Friend Level</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dwayne 'The Rock' Johnson</td>
                    <td>Dallas></td>
                    <td>Top Dog/BFF</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h1>Suggested Friends</h1>
    <div class="table-container" style="width:500;" align="center;">
        <table id="addFriends" class="table table-striped table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Office</th>
                    <th scope="col">Friend Level</th>
                    <th scope="col">Add</th>
                </tr>
            </thead>
            <tbody>
                <tr id="ryan">
                    <td>Ryan Reynolds</td>
                    <td>Dallas</td>
                    <td>Acquaintance</td>
                    <td class="addColumn">
                        <a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
                            <i class="fas fa-check-square"></i>
                        </a>
                    </td>
                </tr>
                 <tr id="daniel">
                    <td>Daniel </td>
                    <td>Dallas</td>
                    <td>Acquaintance</td>
                    <td class="addColumn">
                        <a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
                            <i class="fas fa-check-square"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script language="javascript">
        var row = document.getElementById("ryan");
        function shiftFunc(elem) {
            row = elem.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
        function putBack() {
            var tbl = document.getElementById("existingFriends");
            var add = row.querySelector('.addColumn');
            row.removeChild(add);
            tbl.appendChild(row);
        }
    </script>
</body>
</html>

用户回答回答于

你的javascript应该是这样的。

<script language="javascript">
        var row = document.getElementById("ryan");
        function shiftFunc() {
            row.parentNode.removeChild(row);
        }
        function putBack() {
            var tbl = document.getElementById("existingFriends");
            row.lastElementChild.remove();
            tbl.appendChild(row);
        }
</script>

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动