Accordion table showing another table - javascript

I am trying to set an accordion in multiple tables.
Once user clicks on a <tr>, another table shows at the bottom.
HTML
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="parent-clickable">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
<tr class="hidden">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS
$(document).ready(function() {
$("parent-clickable").click(function() {
var text = $(this).closest("tr").find(".hidden").slideToggle(200, "linear");
});
console.log("Clicked");
});
JSFIDDLE


Some little things to fix in your code, HTML is fine.
$(document).ready(function() {
$(".parent-clickable").click(function() {
$(this).next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
});
You forgot to add the selector in front of "parent-clickable" in this case, a class so prefix it with a dot.
using .closest and .find seems redudant in this case, when a single .next can help achieve what you want. Finally, if you are not using it elsewhere, there's no need to store all this in a variable.


$(".parent-clickable").click(function() {
$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
.hidden {
display: none
}
table {
border: 1px solid red;
}
td,
th {
padding: 5px 10px;
}
.parent-clickable {
background: rgba(0, 0, 0, .3);
cursor: pointer;
z-index: 100000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="parent-clickable">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
<tr class="hidden">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
$(".parent-clickable").on("click", function() {
　$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
How about this? A missing . on the parent-clickable selector and use next instead of find?

Related

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>

why search is not working on jquery-dataTable javascript jquery

i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>

The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin

A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

hide column 2nd column when row above uses rowspan

I have this table
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
It renders like this
I want to get rid of the blank column of headers.
I've tried using this css
'th:nth-of-type(2) {display: none;}'
I got this instead
The rowspan is throwing me off. I'm willing to use a clever regex substitution or css.

I used css not selector
th:nth-of-type(2), tbody th:not([rowspan]) {display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Let's get weird with it. I think :empty pseudo selector just might be what you're looking for. I don't know how different your full table structure is, but this should put you on the right path.
I placed my css on two lines for readability. You can combine as you wish.
tr > th:empty:nth-child(2){display: none;}
tr > td:empty:nth-child(2){display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Here is one way to do it with jquery. This locates each <th> with a rowspan attribute and hides any immediately proceeding column.
$("table.dataframe").find("th[rowspan]").each(function() {
var index = $(this).index() + 2;
$(this).closest("table.dataframe").find('th,td').filter(":nth-child("+index+")").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

You can achieve this by giving tds and ths borders then setting the first col border to 0 or none, but you gonna have to omit or set the table border to 0:
table {
border-collapse: collapse;
}
table th, td {
border: 1px solid #000;
}
table th.no-border {
border: none;
}
<table class="dataframe">
<thead>
<tr style="text-align: right;">
<th class="no-border"></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>

is this table data dynamic?
assuming this table is fixed javascript way would be like this
it checks if your second column is blank then remove then second element of each table row
<script>
var x = document.getElementsByTagName("th");
var check = x[1].innerHTML;
if(check == "") {
var blk_0 = document.getElementsByTagName("tr")[0];
var blk_1 = document.getElementsByTagName("tr")[1];
var blk_2 = document.getElementsByTagName("tr")[2];
blk_0.removeChild(blk_0.childNodes[3]);
blk_1.removeChild(blk_1.childNodes[3]);
blk_2.removeChild(blk_2.childNodes[1]);
}
</script>
https://jsfiddle.net/3erhzcta/

Get row index of table in jQuery

I want to get the index of a element within the following table when the user clicks on a row.
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>
How would I do this with jQuery?
I have tried something similar to this:
$("#event_table tbody tr").on("click", function() {
$(this).index();
});

Your code works just fine:
$("#event_table").on("click", "tbody tr", function() {
alert($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>

Return datatable input field

How can I return the value of an input in my jquery datatable? Here is my table:
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{{#each context}}
<tr>
<td class="product_code">{{product_code}}</td>
<td class="brand">{{brand}}</td>
<td class="category">{{category}}</td>
<td class="description">{{description}}</td>
<td class="price">$ {{invoice_price}}</td>
<td class="quantity"><input type="text"></td> //WANT TO RETURN THIS
<th>Details</th>
<th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>
</tr>
{{/each}}
</tbody>
</table>
I specifically want to return the value in this input with the click of a button that is also part of that row:
<td class="quantity"><input type="text"></td>
So far I tried:
$(".btn-btn-info").click(function() {
var quantity: $(this).parent().parent().children('td.quantity').val();
console.log(quantity) // returns undefined
}
Thank you in advance!

You can access textbox value as
var quantity = $(this).parents("tr:first").find('.quantity input').val();

You are using the wrong class, there isn't any class by the name of btn-btn-info
$("button.btn").click(function(){
console.log( $(this).parent().parent().find('input').val() );
// console.log(quantity) // returns undefined
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="product_code">{{product_code}}</td>
<td class="brand">{{brand}}</td>
<td class="category">{{category}}</td>
<td class="description">{{description}}</td>
<td class="price">$ {{invoice_price}}</td>
<td class="quantity"><input type="text" value="hello world"></td> //WANT TO RETURN THIS
<th>Details</th>
<td><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></td>
</tr>
</tbody>
</table>

<html>
<head>
<title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
szTr = '<tr><td class="product_code">product_code</td>';
szTr=szTr+'<td class="brand">brand</td>';
szTr=szTr+'<td class="category">category</td>';
szTr=szTr+'<td class="description">description</td>';
szTr=szTr+'<td class="price">$ invoice_price</td>';
szTr=szTr+'<td class="quantity"><input type="text" value="222222"></td>';
szTr=szTr+'<th>Details</th>';
szTr=szTr+'<th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>';
szTr = szTr + '</tr>';
$('#productsTable tbody').append(szTr)
$('#productsTable').on('click', '.btn-info', function () {
alert($(this).closest('tr').find('td.quantity').find('input').val());
});
});
</script>
</head>
<body>
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Categories

Resources