Develop Reference

Laravel how to move data from table to another using button

Is there any simple way to move data from table to another table using the id? I want to get all the info inside the first table using the id, insert it to another table, and then delete it from current one using Laravel.
In my Html table. For example I have pending reservation table and there's an action button "accept" then if I will click it the data will go to the accepted reservation table.
Pleaser refer to this photo.
enter image description here

you can use sortablejs to do the trick
check this example from the docs

if you are using datatable , then you can do something like that
var table1 = $("#pending").DataTable();
var table2 = $("#reserved").DataTable();
$(document).on("click", "#pending .move", function () {
var row = table1.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table2
.row.add( rowNode )
.draw();
});
$(document).on("click", "#reserved .move", function () {
var row =table2.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table1
.row.add( rowNode )
.draw();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table id="pending" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
</tbody>
</table>
<table id="reserved" class="table mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

copy command is not working on all dynamically generated table items - jsp spring boot

I'm creating a table with 4 columns(id, DestinationURL, ShortLink, Action(copy)). All the data is coming from the database and I'm creating the content with a for-each loop in my JSP page. The output page looks like this
Before action column there is a hidden field that hold the baseURL+ ShortURL i.e. http://localhost:8080/qcX4h6. Here is my code to create this table
<table class="table table-responsive table-striped table-hover table-bordered vertical-alien-middle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Destination Url</th>
<th>Short URL</th>
<!--<th width="20%" colspan="3">Actions</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="links" items="${data}">
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>${links.getShortUrlLink()}</td>
<td id="copyTd" hidden="">
<input type="text" id="${links.getId()}" value="${baseUrl}/${links.getShortUrlLink()}">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink(${links.getId()})">
Copy
</button>
</td>
<!--<td><button type="submit" class="btn btn-primary btn-block">Edit</button></td>-->
<!--<td><button type="submit" class="btn btn-danger btn-block">Delete</button></td>-->
</tr>
</c:forEach>
</tbody>
</table>
The copy command is working fine for the first button but not for all subsequent buttons. Here is my javascript function
function copyShortLink(id) {
var input = document.getElementById(id);
var td = document.getElementById("copyTd");
/* Select the text field */
td.hidden = false;
input.select();
input.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
td.hidden = true;
}
So my question is how can I make the other buttons work with the same function. I'm passing the hidden input field's id in the function so why it works only for the first button and not for others.
Any help will be appreciated. Thanks in advance

In your code i.e: id="copyTd" this will be copied the first row ,as same id cannot used for all row ,instead you can append some value to your <td id=""> i.e : copyTd_${links.getId()} here , add link id to uniquely identify each td. and just add document.getElementById("copyTd_" + id); this your js code.Changes you need to do in your code is as follows :
Jsp code :
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>${links.getShortUrlLink()}</td>
<!--added links_id to your td-->
<td id="copyTd_${links.getId()}" hidden="">
...
</td>
</tr>
Javscript code :
function copyShortLink(id) {
var input = document.getElementById(id);
/*add same id to select particular td*/
var td = document.getElementById("copyTd_" + id);
...
}
With Dummy Data :
function copyShortLink(id) {
var input = document.getElementById(id);
var td = document.getElementById("copyTd_" + id);
/* Select the text field */
td.hidden = false;
input.select();
input.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand("copy");
console.log("Text copied ..." + input.value);
td.hidden = true;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-responsive table-striped table-hover table-bordered vertical-alien-middle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Destination Url</th>
<th>Short URL</th>
<!--<th width="20%" colspan="3">Actions</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
<c:forEach var="links" items="${data}">
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>abc.in</td>
<td id="copyTd_abc" hidden="">
<input type="text" id="abc" value="abc.in">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abc')">
Copy
</button>
</td>
</tr>
<tr>
<td>${links.getId()}</td>
<td>${links.getDestinationUrlLink()}</td>
<td>abcd.com</td>
<td id="copyTd_abcd" hidden="">
<input type="text" id="abcd" value="abcd.com">
</td>
<td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abcd')">
Copy
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>

Use JS/HTML to shift a portion of a row from one table to another and delete the rest using onclick

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>
Picture Output: Before Click
Picture Output: After Click
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.

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>

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>

HTML - Get row Id by pressing a Button inside same row

Supposing I have an HTML Table and each row has Some data, an Update and a Delete Button. I want, by clicking on the Update Button, to retrieve every data THIS SPECIFIC ROW has. I have searched for other examples but they most of them just traversed through a column by using a column id and just printed every cell data they found. I need, upon pressing the update Button, to retrieve all the current cell data this row has. How can I do that?
JS Fiddle HERE
Could not properly indent code after trying for more than 30mins so I gave up

You can change your html button from:
<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>
to:
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
^^^^
Adding the this keyword to the function you are passing the current button. Now, in order to get the corresponding row it's enough you use jQuery.closest():
var row = $(ele).closest('tr');
or with plain js .closest()
var row = ele.closest('tr');
For the update buttons you can add the click handler:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
or with plain js .querySelectorAll():
document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....
The jQuery snippet:
window.getConfirmation = function(ele){
var retVal = confirm("Are you sure you want to delete ?");
if( retVal == true ){
alert("User wants to delete!");
var row = $(ele).closest('tr');
row.remove();
return true;
}
else{
alert ("User does not want to delete!");
return false;
}
}
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Employees</h2>
<table id="employees-table" class="table table-hover table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Born</th>
<th>Country</th>
<th>Department</th>
<th class="text-center">Update Row</th>
<th class="text-center">Delete Row</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Twain</td>
<td>va1122s#gmail.com</td>
<td>1965</td>
<td>England</td>
<td>London</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
</tbody>
</table>
</div>
As per Hossein Asmand comment (How can I do this using only Javascript?) a full js solution follows:
window.getConfirmation = function(ele){
var retVal = confirm("Are you sure you want to delete ?");
if( retVal == true ){
var row = ele.closest('tr');
console.log("User wants to delete: " + row.cells[0].textContent);
row.remove();
return true;
}
else{
console.log("User does not want to delete!");
return false;
}
}
document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
var row = this.closest('tr');
console.log('TR first cell: ' + row.cells[0].textContent);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h2>Employees</h2>
<table id="employees-table" class="table table-hover table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Born</th>
<th>Country</th>
<th>Department</th>
<th class="text-center">Update Row</th>
<th class="text-center">Delete Row</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Twain</td>
<td>va1122s#gmail.com</td>
<td>1965</td>
<td>England</td>
<td>London</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
</tbody>
</table>
</div>

To to retrieve data in row after pressing button Update
<button type="button" class="btn btn-warning" onclick="getData(this)">
window.getData = function(val) {
let arr= [];
val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
if (item.getAttribute('class') != "text-center") {
arr.push(item.innerHTML)
}
},this)
console.log(arr); //["1", "John", "John", "vas#gmail.com", "1976", "USA", "Michigan"]
}

The answer from #gaetanoM will be the accepted one. If anyone wants a way not only to get only the id, but full row data, you may try this:
HTML CODE:
Change this:
<td>1</td>
<td>John</td>
<td>John</td>
<td>vas#gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
to this:
<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">vas#gmail.com</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>
JAVASCRIPT CODE:
Change this:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})
to this:
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var id = $(this).closest('tr').find('.table_id').text();
console.log("Id = " + id);
var firstname = $(this).closest('tr').find('.table_firstName').text();
console.log("First Name = " + firstname);
var lastname = $(this).closest('tr').find('.table_lastName').text();
console.log("Last Name = " + lastname);
var email = $(this).closest('tr').find('.table_email').text();
console.log("Email = " + email);
var born = $(this).closest('tr').find('.table_born').text();
console.log("Born = " + born);
var country = $(this).closest('tr').find('.table_country').text();
console.log("Country = " + country);
var department = $(this).closest('tr').find('.table_departmentId').text();
console.log("Department = " + department);
})
See the results in THIS fiddle.
Thanks again to everyone who contributed in finding an answer!!!

Scroll issue on table row removal

I have the following HTML code:
<tr id="cv643" ondblclick="onCVE(643)">
<td colspan="2">
<a onclick="btnCVA(41,643)" href="#">
Actions
<span class="badge badgew">2</span>
</a>
</td>
<td>Confirm Appointment</td>
<td>29-12-2015</td>
<td style="color: red">12-01-2016</td>
<td style="color: red">Pending</td>
<td colspan="2"></td>
</tr>
Client code is:
function btnCVA(cpkey, cvkey) {
var sel, tbl;
if (onHideCVA()) { // test if Action list already there
$.ajax call to create table row with id 'recCVA'
}
}
function onHideCVA() {
var sel, rc=1;
if ((sel = document.getElementById('recCVA')) !== null) {
sel.parentNode.removeChild(sel);
rc=0;
}
return rc;
}
When the Actions button is clicked, btnCVA creates a row underneath with the recCVA structure, the row contains a sub-table with a button on the [thead] to call onHideCVA, which removes the recCVA tr structure as such:
<tr id="recCVA">
<td></td>
<td colspan="7">
<table id="tblCVA" class="table table-condensed">
<thead id="Q643">
<tr class="lpinfo">
<th></th>
<th>Action</th>
<th>Date</th>
<th>User</th>
<th>Recipient</th>
<th>Due Date</th>
<th>Status</th>
<th>Note</th>
<th style="text-align:right">
<button id="addCVA" class="btn btn-info btn-xs" onclick="btnCVAA(643)">Add Action</button>
<button class="btn btn-info btn-xs" onclick="onHideCVA()">- </button>
</th>
</tr>
</thead>
<tbody>
(Lots of trs)
</table>
So there is a call to onHideCVA from btnCVA, and a straight call to onHideCVA on the inner button.
In instances where the page is larger than the screen, if I click on the button which calls onHideCVA directly, the recCVA row is removed, and the page does not scroll. Just what I want. If I click on the btnCVA a-link, onHideCVA is called indirectly, the row is removed, but the page scrolls to the top. Not what I want.
I can't figure this out. Calling onHideCVA directly removes the row and nothing. Calling onHideCVA indirectly via btnCVA removes the row but scrolls to the top of page. Very confusing.
Firefox 40.0.3.
Any help? Thanks. Eric.