使用JS/HTML将行的一部分从一个表移动到另一个表，并使用onclick删除其余行
使用JS/HTML将行的一部分从一个表移动到另一个表，并使用onclick删除其余行
提问于 2018-08-02 05:01:48
我有两个表- addFriends和existingFriends。addFriends表的第四列中有一个按钮，单击该按钮时，应从该表中删除相应的行，并将其添加到existingFriends表中。
现在，我的代码删除了整个行(正确)，并将其移动到另一个表(正确)，但它包括按钮，我不希望它这样做。格式化也变得混乱，我不知道为什么。
代码：
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>下面的两个答案都解决了将一行移动到不同表的问题。我不打算费心修复格式问题，因为我现在需要将所有内容转换为react，而react没有value或onclick javascript函数。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-02 05:23:47
您可以为具有add按钮的表格单元格指定一个类，以便可以使用查询选择器选择它并将其删除。
要使添加按钮更加动态，您应该将this作为参数传递给该函数，并将row设置为该按钮的parentNode的parentNode，以便该函数可用于多个行。
<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>
Stack Overflow用户
发布于 2018-08-02 05:27:00
你的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51642213
复制相关文章
相似问题