Use JS/HTML to shift a portion of a row from one table to another and delete the rest using onclick
Question
I have two tables - addFriends and existingFriends. The addFriends table has a button in the fourth column that, when clicked, should delete the corresponding row from that table and add it to the existingFriends table.
Right now, my code deletes the entire row (correct) and moves it to the other table (correct) but it includes the button and I don't want it to do that. The formatting also gets messed up and I can't figure out why.
Code:
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>
Both of the below answers solved the problem of moving one row to a different table. I am not going to bother fixing the formatting issue as I am now required to convert everything to react and react does not have value or onclick javascript functions.
2 answers
solution1
0 ACCPTED 2018-08-01 21:23:46
You can give the table cell with the add button a class so it can be selected with a query selector and removed.
To make the adding button more dynamic, you should pass this as an argument to the function and set row as the parentNode of the parentNode of the button so the function will work for more than one row.
<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>
solution2
0 2018-08-01 21:26:59
your javascript should look like this ...
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.