How to replace append() of jQuery with append() of JavaScript - javascript

How to replace append() of jQuery with append() of JavaScript
I have two tables and I want to insert table 2 at the end of table 1. With jQuery it's so easy that I came up with the "good idea" to try doing it with javascript.
Here is the code of what I have tried so far:
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").append(
document.querySelector("#lst2").querySelector("tbody").innerHTML
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>
My question:
How to replace append() from jQuery with append() JavaScript?


In vanilla JavaScript, it's .appendChild(), not .append() and you don't append .innerHTML, you have to append a DOM node.
$(document).ready(function (){
// Version using jQuery
$("#jQuery").on("click",
function () {
$("#lst1").find("tbody").append(
$("#lst2").find("tbody").html()
);
});
// Version using JavaScript
$("#jScript").on("click",
function () {
document.querySelector("#lst1").querySelector("tbody").appendChild(
document.querySelector("#lst2").querySelector("tbody")
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
</tbody>
</table>
</div>
<div style="height:70px; overflow:scroll;" tabindex="1">
<table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
<tr>
<th> code </th>
<th> Name </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Merge jQuery</button>
<button id="jScript">Merge jScript</button>
</body>
</html>

Related

How to get the table row data in an input when I check a checkbox in that same row?

I have a table which have some fields like Service , amount , tax , action , I just want that if I tick on checkbox in that row , I want the table service data like Subscription charges should be added in an input and when I tick on another rows checkbox this table data also should add in that input with a comma like subscription charges, registration fees , also when I untick that row checkbox , that table data like subscription charges, registration fees also should be removed in input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">

One way of doing it using jQuery is to first make sure we notice if a checkbox is changed, then go to the parent row, and find the first TD which should contain what you're out after. After all that, get the "target" element (ie. the input box at the bottom) and set it's value.
$("input[type=checkbox]").on("change", function() {
var value = $(this).parent().parent().find("td:first-child").text();
var target = $("input[name=services]");
target.val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">

How to search data from multiple table through jQuery

I have three different tables and I want to search for data in them. In this task I successfully searched data but when I search data of one of the table remaining two tables are also being searched. Can anyone help to search data according to the respect of their, Like when I searched data of the first table that time it should give me only data of the first table.
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script>
function SearchTable()
{
$(document).ready(function(){
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
debugger;
$("#myTable tr,#yourTable tr,#ourTable tr").filter(function() {
debugger;
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
SearchTable();
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="ourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="ourTable">
<tr>
<td>Shubham</td>
<td>Shubham#gmail.com</td>
<td>023456789</td>
</tr>
<tr>
<td>pal</td>
<td>palenesh#gmail.com</td>
<td>111125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
</body>
</html>

//put the document ready around your whole logic, not inside the method
$(document).ready(function() {
function SearchTable() {
//bind on all your different inputs
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
//get the input value, trimmed, and lowercased
var value = this.value.trim().toLowerCase();
//get the associated table
var $table = $("#"+ this.getAttribute('data-target'));
//show all the rows to "undo" previous filtering
$table.find('tr').show();
//only filter if the value is not blank
if (value) {
//find all the rows that do not match the filter, and hide them
$table.find('tr').filter(function(){
return this.innerText.toLowerCase().indexOf(value) < 0;
}).hide();
}
});
}
SearchTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search" title="Type" data-target="myTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type" data-target="yourTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>

How to replace an entire table with pictures?

This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>

you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/

Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>

How do you sort for row details in HTML?

I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)

I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>

Links to show and hide tables

I am trying to have links that by clicking on it will show and hide the table below it, once I land on the page all I would like to see are links. I trying with this sample code, but not getting anywhere, any suggestions?
<html>
<title>hise show</title>
<head>
<script>jquery link here</script>
<script type="text/javascript">
$(document).ready(function() {
$('.act table').hide();
$('.see').click(function() {
$(this).parents('table').find('td').slideToggle("slow");
});
});
</script>
</head>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
</body>
</html>
Thank you!

You have just to change your selector to :
$(this).next('table').slideToggle("slow");
Using JQuery next() function your code will work.
$('.act table').hide();
$('.see').click(function() {
$(this).next('table').slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>

$('#showTable').click(function(){
$('#mytable').toggleClass('hidden');
if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table');
else $('#showTable').text('Show Table');
});
table tr td{ border: 1px solid #383838; }
table { border: 1px solid #383838; }
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Show Table
<table class="hidden" id="mytable">
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
</table>
Another quick solution for your approach: Check this code: http://jsfiddle.net/vxt5h9o7/

Try this, run the snippet
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
<script>
$(document).ready(function(){
$(".act").hide();
$(".see").click(function(){
$(this).next().toggle();
});
});
</script>
</body>
</html>

Categories

Resources