We Keep Coding

I need to copy selected row from one table to another html table using JQuery or Javascript

I have data in source table and i want to copy and append row to destination table on button click of specific row. There is an h1 where I want to display column total of price column of destination table. Also I need button on destination table from which I can remove the selected row from that table.
<table id="source_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Product 1</td>
<td >$10</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>2</td>
<td >Product 2</td>
<td >$20</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>3</td>
<td >Product 3</td>
<td >$30</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> Total Price <h1> <!-- I want to show price column(dest_table) total here -> </h1> </div>

Consider the following example.
$(function() {
function calcTotal(t) {
var rows = $("tbody tr", t);
var total = 0.00;
var val;
rows.each(function(i, r) {
val = $("td:eq(2)", r).text().substr(1);
total += parseFloat(val);
});
$(".total").html("$" + total);
}
$(".copy-row").click(function(e) {
var src = $(this).closest("tr");
var dst = $("#dest_table tbody");
src.clone().appendTo(dst);
$("#dest_table tbody tr:last td:eq(3) button").toggleClass("copy-row del-row").html("X");
calcTotal($("#dest_table"));
});
$("#dest_table tbody").on("click", ".del-row", function(e) {
if (confirm("Are you sure you want to remove this row?")) {
$(this).closest("tr").remove();
}
calcTotal($("#dest_table"));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$10</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$20</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Product 3</td>
<td>$30</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="total"> Total Price
<h1></h1>
</div>
This makes use of a lot of elements, yet at it's core, it does clone the row, and appends the clone to the destination.

Do you want something like this:
$(document).ready(function(){
$(".copy-row").click(function(){
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 4th TD
var markup = "<tr><td>" + col1 + "</td><td>" + col2 + "</td><td>" + col3 + "</td><td>" + col4 + "</td></tr>";
$("#dest_table tbody").append(markup);
// sum of price
var sum = 0;
$('#dest_table tbody tr').each(function() {
var price = $(this).find('td:eq(2)').text();
price = price.replace('$', '');
sum += parseInt(price);
});
$('#total').text('$' + sum);
});
});
But I highly recommend you use some framework like React, Vue or Svelte. Your life will be easier.

How to get the row id onClick in jQuery/JavaScript?

I have a table populated with dynamic data. the last column has a button which when I click I would like to pass the row id to the JS function.
I need the id because I am doing a POST Ajax request and on success I want to take the response data and update the selected row with new data.
This is what I would do to insert a new row:
var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();
but what can I do to get the row ID and update it with the response data?
EDIT. Datatable:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach (get_all_customers_list() as $user) { ?>
<tr>
<td>
<b> <?php echo $user["recipient_name"]; ?></b>
</td>
<td>
<?php echo $user["registration_date"]; ?>
</td>
<td>
<button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>
</td>
</tr>
<?php }?>
</tbody>
</table>

Since you are only wanted to get the row id of the clicked row edit button. You can simply use table.row function and pass the actual tr of the clicked button.
Demo (Showing the actual id (1, 2) which is stored as name)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//Getting the actual table ID
var row = $(_this).parents('tr')[0];
//Data table row id
console.log(table.row(row).data()[0]);
}
<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" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
Demo (Showing the actual index of table - Index start from 0 to depending on how many rows you have)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//get the closest of clicked edit button
var tr = $(_this).closest("tr");
//get the index of row
var rowindex = tr.index();
//Index of row
console.log(rowindex)
}
<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" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>

this is my simple answer:
var table = $('#table-values');
$('#table-values').on( 'click', 'tr', function(){
var id = this.id;
alert( 'Clicked row id '+id );
});
Easy. :)

JavaScript or jQuery for print a row entry in a Cheque format every line of table should be print separately by print link

[this is my Django based project and I want to print this table by row the print link is in the table that print particular row entries in a format like a Cheque please suggest JavaScript or Jquery for this]
<script>
function Print() {
var docprint = window.open('about:blank', '_blank'); //new page
var oTable = document.getElementById('result_tbl').rows.item(0); //get the 1st row by a selector
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>'); //write HEAD section
docprint.document.write('</head><body><center>'); //write BODY tag and center tag for printing
docprint.document.write(oTable.innerHTML); //select the TR's HTML and add it to the new page
docprint.document.write('</center></body></html>'); //close BODY tag
docprint.document.close();
docprint.print();
docprint.close();
}
</script>
<div id="print-content">
<b><u><h2 align="center">Duplicate Cheque</h2></b></u>
<table id="result_tbl" class="display" >
<thead>
<tr>
<th>S.No</th>
<th>To_Pay</th>
<th>Amount</th>
<th>Amount_In_Words</th>
<th>Cheque_No</th>
<th>Account_No</th>
<th>Cheque_Date</th>
<th>Print</th>
</tr>
</thead>
<tbody>
{% for duplicate in duplicates %}
<tr>
<td class="sno"> </td>
<td>{{duplicate.topay}}</td>
<td>{{duplicate.amount1}}</td>
<td>{{duplicate.amount_string}}</td>
<td>{{duplicate.chequeno}}</td>
<td>{{duplicate.accountno}}</td>
<td>{{duplicate.chequedate}}</td>
<td>Print</td>
</tr>
{% endfor %}
<tbody>
</table>

you can use below exam
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#media print {
#result_tbl tbody tr {
display: none;
}
.printRowStyle {
display: block!important;
}
#result_tbl tbody tr td:first-child,#result_tbl thead tr
th:first-child,#result_tbl tbody tr td:last-child,#result_tbl
thead tr th:last-child{
display: none;
}
}
</style>
<script type="text/ecmascript">
function printRow(obj) {
$(obj).closest('tr').addClass('printRowStyle');
window.print();
$(obj).closest('tr').removeClass('printRowStyle');
}
</script>
</head>
<body>
<table id="result_tbl" class="display">
<thead>
<tr>
<th>S.No</th>
<th>To_Pay</th>
<th>Amount</th>
<th>Amount_In_Words</th>
<th>Cheque_No</th>
<th>Account_No</th>
<th>Cheque_Date</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sno"> </td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a onclick="printRow(this)">Print</a></td>
</tr>
<tr>
<td class="sno"> </td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a onclick="printRow(this)">Print</a></td>
</tr>
<tbody>
</table>
</body>
</html>

Search table content based on title attribute value

I want to have search button to my tables.The search button should filter the values based on title tag value in first and second cell of row and also with whole row.I am able to do this without depending on title tag but I need to do this with title tag also.
How can I achieve this?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Testname</th>
<th>Description</th>
<th>Created on</th>
<th>Updated on</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td title="test_name">Test Name</td>
<td title="test desctiption"> trail testing</td>
<td>yesterday</td>
<td>two hour ago</td>
</tr>
<tr>
<td title="test_name">
Trail Test
</td>
<td title="desctiption">testing</td>
<td>today</td>
<td>a hour ago</td>>
</tr>
</tbody>
</table>
</div>

You can filter the title text too:
(PS: Do not toggle in the filter - that is abusing a side-effect)
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var re = RegExp(value.replace(/([\(\)])/g,"\\$1"), "i"); // escape ()
$("#myTable tr").hide().filter(function() {
var inTitle = $(this).find("td").filter(function() {
return re.test(this.title);
}).length > 0; // is in title?
return re.test($(this).text()) || inTitle
}).show();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Testname</th>
<th>Description</th>
<th>Created on</th>
<th>Updated on</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td title="test1">Test Name</td>
<td title="( test1d )"> trail testing</td>
<td>yesterday</td>
<td>one hour ago</td>
</tr>
<tr>
<td title="test2">
Trail Test
</td>
<td title="(test2d)">testing</td>
<td>today</td>
<td>a hour ago</td>>
</tr>
</tbody>
</table>
</div>

How to add rows in HTML Table using Jquery?

I want to add rows dynamically at runtime using Jquery. At beginning table don't have any records. When user click the ADD Button it has to add the rows.
When user click ADD Button the operator dropdown list box value and Filter values should add in that table row.
Here what I tried
Jquery CODE
$("#btnAdd").click(function () {
// $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>");
$('#queryTable > tbody:last-child').append('<tr>Record1</tr><tr>Record2</tr>');
});
I tried both lines. But it doesn't make any sense.
Thanks
HTML Code
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td> //Please ignore these two records. At beginning the table will be empty
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>

The correct jQuery code to add HTML elements is:
$('#queryTable tbody').append('<tr><td>Record1</td><td>Record2</td></tr>');

Your input string HTML is incorrect. As of now you have no TD element thus content is not displayed. However its appended and exists in DOM
'<tr><td>Record1</td><td>Record2</td></tr>
instead of
'<tr>Record1</tr><tr>Record2</tr>'
$('#queryTable > tbody:last-child').append('<tr><td>Record1</td><td>Record2</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>

<!DOCTYPE html>
<html>
<head>
<title>Add Rows Dynamically</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add").click(function(){
var name = $("#name").val();
var lastname = $("#lastname").val();
var markup = "<tr><td>" + name + "</td><td>" + lastname + "</td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
<input type="text" id="name" placeholder="Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" class="add" value="Add">
<table style="border: 1px solid black;">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
It may help you.