The question I have a table pulling from the backend for events, will list out in the font in 3 different column with specific categories, but sometimes only have 1 event or 2, but I need to at least display 3 items.
So I try to use jQuery each function to check how many rows in the table if only have 1 add 2 rows if only have 1 row add 2 instead.
So the table will be same height no matter how many events display.
My code doesn't work correctly, so I was hoping anyone can help me out with this.
Here's my sample code:http://jsfiddle.net/s2devfrg/
Here's the jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if(number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})
The selector you are using on .each is wrong. There are no elements with the passed id.
Also there are couple of blank tr's in your html which I have removed.
Try this code below:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if(number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
})
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="table-amount">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated fiddle link
I have reviewed you sample code, first of all kindly note that in jQuery
when you find tr it will count total number of rows including tr inside thead.
So your
total counts are always one more than actual rows.
Second thing you should not append just tr you should provide same structure
as in
your existing rows.
Also in first table structure you had one extra th may be typo.
In first and third table structure you have one tr extra with empty
structure
instead, you should have same structure as you have for others.
here is the link for modified JS Fiddle link
https://jsfiddle.net/patelmurtuza/kj8zgqad/
Related
This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.
I have a bootstrap like this in main.html page:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
My requirement is:
When I click on any row of the table( either on the text or even in the space between two columns) it has to redirect to another Html page.
how can I do that?
try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="table table-striped" id="tableId">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script>
function addRowHandlers() {
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
window.location.href = "http://www.w3schools.com";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
window.onload = addRowHandlers();
</script>
</body>
</html>
You can also achieve this by using Javascript on tr (inline) :
<tr onclick="document.location = 'links.html';">
In this way you can set different links for different rows. Please check below updated HTML snippet :
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr onclick="document.location = 'http://www.google.com';">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr onclick="document.location = 'http://www.himanshu.com';">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Please find below the code that will redirect you to another link on click of any rows (except header row)
Add click event on all the rows inside the table body and execute your task.
$(function() {
$('tbody tr').click(function() {
window.location.href = 'https://www.google.com';
})
})
)
First, i suggest to add class to <tr> tag (so if you plan to have multiple tables in page it does not affect other table)
Then, i assume your using jquery and you have dynamic table rows.
#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)
// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
e.stopPropagation(); // only add this if you have <a> tag in row
window.location.href = $(this).data('href'); // dynamic link
});
// new tab redirect
$(document).on('click', 'tr.link', function(){
$('External Link')[0].click();
});
It can be done using jQuery. Bind an event listener on click of TR and then redirect the user as needed.
Your HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
jQuery Code
$(function() {
$('tr').on('click', function() {
document.location.href = 'https://google.com';
});
});
Plain JavaScript
var table = document.getElementById('js-table');
for(var i = 0; i < table.rows.length; i++) {
table.rows[i].addEventListener('click', function() {
document.location.href = "https://google.com"
});
}
Here i want to copy rows and must be able to paste the rows below
i want to add functionality to my table as in this fiddle
http://jsfiddle.net/Lfjuapub/1/
Please find my fiddle
https://jsfiddle.net/zrcoLyeg/6/
<table id="tblColumnSchedule" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">User</th>
<th data-hide="phone, tablet">Label</th>
<th data-hide="phone, tablet">Profile</th>
<th data-hide="phone, tablet">Location</th>
<th data-hide="phone, tablet">Start</th>
<th data-hide="phone, tablet">End </th>
</tr>
</thead>
<tbody>
<tr>
<td>s1</td>
<td>w10x22</td>
<td>A1</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>s2</td>
<td>w10x24</td>
<td>A1.1</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
For example if i select 2 rows cloumns like Location, Start , End,
i must be able to paste selected rows in 3 rows.
Any help is highly appiceable.
Try using an external library like handsontable.
I have the table design in the following manner:
<tr>
<th rowspan="6" scope="row">Payment History: <br><em>(Up to 25 months)</em></th>
<td colspan="3">
<table id="paymentHistory" cellspacing="1" summary="Payment History" class="table table-sm table-bordered" >
<thead class="thead-default">
<tr>
<th style="white-space: nowrap;"></th>
<th style="white-space: nowrap;">Jan</th>
<th style="white-space: nowrap;">Feb</th>
<th style="white-space: nowrap;">Mar</th>
<th style="white-space: nowrap;">Apr</th>
<th style="white-space: nowrap;">May</th>
<th style="white-space: nowrap;">Jun</th>
<th style="white-space: nowrap;">Jul</th>
<th style="white-space: nowrap;">Aug</th>
<th style="white-space: nowrap;">Sept</th>
<th style="white-space: nowrap;">Oct</th>
<th style="white-space: nowrap;">Nov</th>
<th style="white-space: nowrap;">Dec</th>
</tr>
{{#each PaymentProfile}}
<tr>
<th rowspan="2">{{#key}}</th>
</tr>
<!--<tr>-->
<!--{{#each this}}-->
<!--<th style="white-space: nowrap;">{{months #key}}</th>-->
<!--{{/each}}-->
<!--</tr>-->
<tr>
{{#each this}}
<td style="height: 42px;">{{hideEmptyData this}}</td>
{{/each}}
</tr>
{{/each}}
</thead>
</table>
</td>
</tr>
I have some cells which are empty for certain rows. The JSON from which I am rendering has some empty fields/elements, due to which they are not displaying on the table. I want to hide those cells which are empty.
Do I have to write a registerHelper or jquery function? How would I do that?
$("#paymentHistory > tbody > tr").each(function() {
console.log("inside table");
$td=$(this).find('td');
if($td.text() === ''){
$(this).css("display", "none");
}
// $(this).parent().hide();
});
I am trying above code. But i am not able to enter into the function itself.
I am not able to print "inside table" in console.
Can someone suggest me what i am doing wrong ?
So what I want to do is to hide the table cells which are empty. For example, in the year 2014, elements for all of the months are empty, so I don't want to display the row of 2014; and in 2015 only elements for JAN to AUG should be displayed because the others are empty.
JSON Data is as follows:
"PaymentProfile":{
"2015":{
"1":"9",
"2":"-",
"3":"-",
"4":"-",
"5":"-",
"6":"9",
"7":"9",
"8":"B",
"9":" ",
"10":" ",
"11":" ",
"12":" "
},
"2014":{
"1":" ",
"2":" ",
"3":" ",
"4":" ",
"5":" ",
"6":" ",
"7":" ",
"8":" ",
"9":" ",
"10":" ",
"11":" ",
"12":" "
}
},
Can someone help me out?
Output of the above code
Solved the above problem using following code:
Hope it helps someone.
$('#paymentHistory tbody tr').each(function(){
var tr = $(this);
var tdNumber = tr.find('td').length;
var counter = 0;
tr.find('td').each(function () {
if ( $(this).text().trim() == '' ) counter++;
});
if ( counter == tdNumber ) tr.hide();
});
First of all, do not add inline style: height: 42px on your table cell. <td> has no height by default, so if you put no content inside, it will have height:0. Now, the <tr> is the same - it does have height: 0 by default and gets height of its children, which means that if there aren't any, it will not be visible due to the default height property.
Look at the example:
<table>
<thead>
<th>Row</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
</thead>
<tbody>
<tr>
<td>1st row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>2nd row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4th row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
The third row is there in the HTML code, but it is not visible by default, as it's empty. So all you need to do is to remove the default inline styles to achieve this effect. If you want to add the height: 42px for the table cell, consider using CSS (but not inline - use <style> tag in the <head> of your file or <link> it from an external .css stylesheet):
td:not(:empty) {
height: 42px;
}
Ref: :not, :empty
Is it possible to work with 2 rows in THEAD with dataTables?
<table>
<thead>
## row 1
## row 2
</thead>
<tbody></tbody>
</table>
In row 1 I need 2 single columns and one column with colspan="3":
<tr>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
And in row 2 I need 5 columns:
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
But I have a case where I don't need 5 columns, but only 3.
Can this be generated dynamically?
UPDATE: I tried: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
But there's no good example how it's generated.
If you look at the source code of the example link you posted, it seems quite clear:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th colspan="3">Details</th>
</tr>
</tfoot>
(Code lifted from link above)
A word on viewing source code: In Firefox you can press ctrl + u to view the page source code. Even if there is heavy jQuery action on the page, the source code in that window will always be the original one without DOM modifications.