使用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函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51642213
复制相关文章
相似问题