I am very much interested to know how to use jquery tablesorter without tbody and th block, the reason behind this is I have many tables and css working which I generated from http://www.csstablegenerator.com/ site, in which only tr and td blocks only used
This is working table with tbody block Working default table style fiddle
But I want to sort table with only tr and td blocks Expected Fiddle
This is my test table which I want to sort
<table border='1' id='test' >
<!-- this is my header -->
<tr>
<td>AlphaNumeric</td>
<td>Numeric</td>
<td>Animals</td>
<td>Sites</td>
</tr>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
</table>
Assuming you don't want to manually deal with the HTML of the table, so I would get jquery to do it for you:
var header = $("#test tr:first").html();
$("#test tr:first").remove();
$("#test").prepend('<thead>' + header + '</thead>');
$('#test').tablesorter();
Related
I am trying to apply a css style to change color of clicked rows of an HTML table. On the click event, I am adding the class (selected-row). Now, my table has a sorting functionality when clicking on the heading of each column. The heading gets colored which is not what I want. I want only rows but not the heading. So, I changed my style to (not first child). Now, the heading AND first row don't get color changed. I need only the heading to NOT change color and all other rows to change color when I add selected-row class.
.selected-row:not(:first-child) {
background-color: brown;
color: #FFF;
}
$("#example tr").click(function () {
$(this).addClass('selected-row').siblings().removeClass('selected-row');
});
If you mark up your table with a <thead> to contain the header row, and <tbody> to contain the data rows, you can specifically target only rows in the table body - like this in CSS:
tbody > tr { }
And like this in jQuery:
$('#example tbody > tr')...
Table mark-up:
<table>
<caption>This table contains...</caption>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$50</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Item 1</td>
<td>$20</td>
</tr>
<tr>
<td>Item 2</td>
<td>$30</td>
</tr>
</tbody>
</table>
One way to potentially do it would be to wrap your table header in <thead></thead> and body in <tbody></tbody> and then apply whatever selector as
$("#example tbody tr").click(function () {...});
You can target "td" tags:
$("#example tr td").click(function () {
$(this).parent().addClass('selectedrow').siblings().removeClass('selected-row');
If you are using "th" tags in your table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
If you don't want to modify your header using the th or tbody tags, you could do something like this.
$("table tr:gt(0)").click(function(){
$(this).siblings().removeClass('selected-row');
$(this).addClass('selected-row');
})
You can see this working in this jsfiddle
Use th for the header row element.
I have a page with multiple dynamic tables , one of the table looks like the below structure
Col1 Col2 Col3
1 One Two
2 b 15/12/2017
3 a X
2 W 10/12/2014
HTML
<table id="table1">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr> <td>1</td>
<td>b</td>
<td>15/12/2017</td>
</tr>
<tr> <td>2</td>
<td>b</td>
<td>15/10/2017</td>
</tr>
<tr> <td>3</td>
<td>b</td>
<td>15/09/2017</td>
</tr>
</tbody>
</table>
I would like to know How can I get the cell in col3 with header name based on the value at col1?
EX:
I want to find the table by ID and check its first cell for each row, if it equal 2 then get the cell value of col 3 in the same row !
Any help would be fully appreciated
You can try something with jquery like below snippet.
Update: you can get particular column by table header as well using $('th:contains("col3")').index()
$(document).ready(function() {
$('#myTable').find('tbody td:first-child').each(function() {
if ($(this).text() == '2') {
console.log($(this).closest('tr').find('td').eq($('th:contains("col3")').index()).text());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
<td>ONE</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>TWO</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>THREE</td>
</tr>
</tbody>
</table>
With jQuery it's quite easy; if you've found the cell, get the row, and the third cell in that row;
$('td') // Select all cells
.filter(function() { // Filter the cells
return $(this).text() == '2';
})
.closest('tr') // get the table row
.find('td') // select all cells in that row
.eq(2) // select the third cell (0-based index)
.text(); // this will output '15/12/2017'
edit I'm in a good mood today, check this little demo; https://jsfiddle.net/a32knb81/. Just input your search key in the input field an you'll get the value of the third column in that same row.
I have a treegrid that is build like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr class="treegrid-0">
<th>name2</th>
<th>type2</th>
<th>Number2</th>
</tr>
<tr class="treegrid-1">
<th>name1</th>
<th>type1</th>
<th>Number1</th>
</tr>
<tr class="treegrid-2 treegrid-parent-1" style="display:none;">
<th>name1-A</th>
<th>type1-A</th>
<th>Number1-A</th>
</tr>
<tr class="treegrid-3 treegrid-parent-1" style="display:none;">
<th>name1-B</th>
<th>type1-B</th>
<th>Number1-B</th>
</tr>
<tr class="treegrid-4">
<th>name0</th>
<th>type0</th>
<th>Number0</th>
</tr>
</tbody>
</table>
I would like to add the sorting option when i click on a column.
The sorting option has to be done only on the top parent.
It's a treegrid, so the expected behaviour is that the child nodes has to be moved also with the parent if the parent has to move.
How can i do that with JS ?
instead of doing all the hard work yourself, you can use the awesome js/jQuery library: datatables: https://datatables.net/
Just after defining your table, give it an ID
<table id = "myTable">..</table>
and then add the following snippet which will transform your table into an awesome table.
$(document).ready(function(){
$('#myTable').DataTable();
});
Cheers!
Here I have a table
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr style="display:none">
<td>jones</td>
<td>.net</td>
</tr>
<tr style="display:none">
<td>James</td>
<td>SAP</td>
</tr>
<tr>
<td>Charles</td>
<td>Java</td>
</tr>
</tbody>
</table>
I want to get text of first row first td text which are visible using jquery, by
above table, I want result as "Charles".
How can get it. I have tried like
$("#table").closest('tbody').children('tr:first').find('td:first').text()
but not getting result.how can I?
Try to use :visible selector to get the visible rows,
$("#table tbody tr:visible:first td:first").text()
To get the visible one use the according :visible selector that jquery ships:
$('#table > tbody > tr:visible:first > td:first').text();
This is Worked for Me.
$('#table> tbody > tr:visible').first().find('td').first().text();
I need to find a TABLE within a DIV tag and perform modifications on the header. The available reporting tool does not allow to identify the generated table but allows script and DIV insertion.
Consider the table below where the header is the first line:
<div id="ScrollHeader">
<table>
<tr>
<td>Browser</td>
<td>Visits</td>
<td>Pages/Visit</td>
<td>Avg. Time on Site</td>
<td>% New Visits</td>
<td>Bounce Rate</td>
<td>Avg. Time on Site</td>
<td>% New Visits</td>
<td>Bounce Rate</td>
</tr>
<tr>
<td>Firefox first</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22 test test test</td>
<td>70.00%</td>
<td>32.61%</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
</table>
</div>
I need a JavaScript or jQuery code to transform the table to the following:
<div id="ScrollHeader">
<table>
<thead>
<tr>
<th>Browser</th>
<th>Visits</th>
<th>Pages/Visit</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tr>
<td>Firefox first</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
</table>
</div>
The code needs to identify the table within <div id="ScrollHeader">, insert THEAD before the first TR, change the TD to TH in the first line and close it with </thead>.
I have tried using $("div p[id^='ScrollHeader']").length to find the DIV and $("tr:first") to perform <table>.prepend(document.createElement('thead')); without success.
Try this:
$('#ScrollHeader table tr:eq(0)').wrap('<thead />');
$('#ScrollHeader table tr:eq(0) td').each(function () {
$('#ScrollHeader table tr:eq(0)').append($('<th />').html($(this).html()));
$(this).remove();
});
$('#ScrollHeader tr:first')
.wrap('<thead />')
.children().each(function(){
text = $(this).text();
$(this).replaceWith('<th>'+text+'</th>');
});
$('#ScrollHeader thead').insertBefore('#ScrollHeader tbody');
you can see it working here