adding td dynamically does not expand by colspan - javascript

Here is my JsFiddle
On click on arrow down image, i am displaying the next tr (initially hidden) which have a td with colspan 5 and table inside it.
My question is why the td is not expanding to the full row, as i have specified colspan=5
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest("tr").next().removeClass('hidden').addClass('show');
});
});


because your .show bootstrap css rule contains following
.show{
display:block; !important;
}
You can overwrite it with custom CSS-rule for the row like this:
.show{
display:table-row !important;
}
Demo


The class show is causing the trouble. Removing the class solves the problem.
HTML
<table class="table">
<caption>Order History</caption>
<thead>
<tr>
<th>S.No</th>
<th>Transaction ID</th>
<th>Date & Time</th>
<th>Status</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>T00580901</td>
<td>10 May'14<br />10:10 am</td>
<td>Delivered</td>
<td>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-repeat"></span>
</td>
</tr>
<tr style="display:none">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Dish Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>South Indian Meal</td>
<td>Rs. 100</td>
<td>2</td>
<td>Rs. 200</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Jquery
$(function () {
$('.glyphicon-chevron-down').click(function () {
console.log("hi");
$(this).closest("tr").next().toggle();
});
});
See the update fiddle.
http://jsfiddle.net/2Xzfb/2/


I'm not sure what happened, I've not looked into it that much but this seems to work: http://jsfiddle.net/57d3M/1/.
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest('tr')
.next('tr')
.toggleClass('hidden');
});
});


Set table-layout to fixed:
.table{
table-layout: fixed;
width: 400px;
}
demo

Related

How to add a class if the number of rows in a table is some number with Javascript/jQuery

I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">

Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>

you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>

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/

Accordion table showing another table

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?

change the class of a specific tag

I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?

Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');

ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>

Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!

try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
​jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
​
DEMO

Categories

Resources