jquery dynamic table id thead th selection - javascript

I'm new to jquery. May be my query looks some what dumb, but really I'm not understanding how to achieve below thing.
Anyway, here is my query:
I have some dynamic tables as below:
<table id='example1'>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>
<table id='example2'>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>
I am trying as below:
$($('table').attr('id') ' thead th').each( function () {
}
Seems something wrong above, could anyone please correct?
I need to achieve as below:
$( dynamicTableId thead th).each(function () {
}

There is no need to have the if you are trying to iterate over all the th elements, Just use the table as selector. You can also use an has attribute selector to make sure it has an id
$('table[id] thead th').each( function () {
})

I Guess i have done in my project , here it is:
<script type="text/javascript">
for (var t=1; t < 4; t++) // Number of table
{
document.write("<table border='1' id='example"+t+"'>");
for (var a=1; a < 5; a++) // Number of row for table
{
document.write("<tr>");
for(var b=1; b<4; b++) // Number of column for table
{
document.write("<td>Table "+t +" " + b+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
document.write("<br/><br/><br/>");
}
</script>
There are better ways to do this, though!

$('.example thead th').each(function () { 
console.log($(this).text());
});
<table id='example1' class="example">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>
<table id='example2' class="example">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>

Related

how to show table cell using js

description cells will starts as hide. The row that I click, will show the description and if i click another row will the current row description and hide the other description
var getTable = document.querySelector("tbody");
var cells = getTable.getElementsByTagName("td");
for (let item of document.getElementsByClassName("desc")) {
item.style.display = "none";
}
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function () {
var selectedRow =
getTable.getElementsByTagName("tr")[this.parentNode.rowIndex];
if (!this.parentNode.rowIndex) {
$(selectedRow).find(".desc").css("display", "none");
} else {
$(selectedRow).find(".desc").css("display", "block");
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblInventory">
<thead>
<tr>
<th>UPC</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>987456</td>
<td>Product Blanks</td>
<td class="desc">Unfinished template for parts 1000222 to 1000299</td>
</tr>
<tr>
<td>654123</td>
<td>Threaded Rods</td>
<td class="desc">Rods threaded at both ends for Support Brackets</td>
</tr>
</tbody>
</table>
Try this in vanilla:
document.querySelector('#tblInventory').addEventListener('click', (e) =>
{
// Hide other descriptions
document.querySelectorAll('#tblInventory td.desc span').forEach(span => {
span.style.display = 'none';
});
// Show clicked row description
if (e.target.tagName === 'TD') {
e.target.parentNode.querySelector('td.desc span').style.display = 'inline';
}
});
#tblInventory td.desc span {
display: none
}
<table id="tblInventory">
<thead>
<tr>
<th>UPC</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>987456</td>
<td>Product Blanks</td>
<td class="desc"><span>Unfinished template for parts 1000222 to 1000299</span></td>
</tr>
<tr>
<td>654123</td>
<td>Threaded Rods</td>
<td class="desc"><span>Rods threaded at both ends for Support Brackets</span></td>
</tr>
</tbody>
</table>
Or with jQuery:
$('#tblInventory').on('click', 'td', (e) => {
// Hide other descriptions
$('#tblInventory td.desc span').hide();
// Show clicked row description
$(e.target).closest('tr').find('td.desc span').show();
});
#tblInventory td.desc span {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="tblInventory">
<thead>
<tr>
<th>UPC</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>987456</td>
<td>Product Blanks</td>
<td class="desc"><span>Unfinished template for parts 1000222 to 1000299</span></td>
</tr>
<tr>
<td>654123</td>
<td>Threaded Rods</td>
<td class="desc"><span>Rods threaded at both ends for Support Brackets</span></td>
</tr>
</tbody>
</table>
Using span is a suggestion, but you can fix the selectors to show/hide the td elements directly as well;
If you don't want to hide previous clicked descriptions, just remove the related code.

table row as a counter in HTML

I would like to know how could I assign a table row an id which is systematically as a counter. It can be a string + a counter as follow:
<table>
<tr id="Row1"> # it can be only a number => id="1"
<tr id="Row2"> # it can be only a number => id="2"
<tr id="Row3"> # it can be only a number => id="3"
.....
<tr id="Row5000"> # it can be only a number => id="5000"
</table
Because I have thousands of rows and then could not assign id to them manually. This is why I want to assign them via XSLT. Does anybody know how could I do so? Thanks.
// javascript
var table = document.querySelectorAll('table tr');
{
for(var i=0;i<table.length;i++){
table[i].setAttribute("id",i+1);
}
//jquery
$("table tr").each(function(index,object) {
object.attr("id",(index+1));
})
$("table tr").each(function(i, tr) {tr.id = 'Row' + (i+1);})
explanation: you can find each tr in table and assign id for each one.
First you assign an id attribute to your table like this
<table id="mytable">
<tr></tr>
<tr></tr>
....
</table>
Then add a script at the bottom of your document
<script>
(function() {
var rows = document.getElementById("mytable").rows;
for(var i = 1; i <= rows.length; i++) {
rows[i-1].id = 'Row'+i;
}
})();
Its a pure javascript solution. No jQuery required.
Assign your table an id. here its newTable then iterate and set the attibute
<script>
function getit(){
$('#newTable').find('tr').each(function(index){
var x= this.setAttribute("id","Row"+[index]);
console.log(x);
})
}
</script>
hope that helped.
You Can Use This:
Your CSS
<style>
body {
counter-reset: section;
}
table tbody tr th::before {
counter-increment: section;
content: "Section " counter(section);
}
table tbody tr th::before {
content: counter(section);
}
</style>
Your Html
<table class="table">
<thead>
<tr>
<th colspan="6">
</th>
</tr>
<tr>
<th scope="col">#</th>
<th scope="col">f1</th>
<th scope="col">f2</th>
<th scope="col">f3</th>
<th scope="col">f4</th>
<th scope="col">f5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
</tbody>
</table>

Add data attribute with value from self

I've got a table to which I'd like to add a attribute 'data-order' to every last child of every row. See the table below.
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
I'd like to add the value of the last td to the attribute.
Before : <td>255 500</td>
After : <td data-order"255 500">255 500</td>
I use $(this).text() to get the value from the td but it doesn't seem to work the way I thought. I get weird data with multiple table rows included. I use this Javascript code to add the attribute.
$(document).ready(function() {
$( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
});
</script>
What is wrong my code ? Thanks.
At this point this doesn't refer to your $( '#table_id tbody tr td:last-child')
I think you must declarate a var, something like this could help you
var $MyObject = $( '#table_id tbody tr td:last-child');
$MyObject.attr( 'data-order', $MyObject.text());
if you have multiple line in you table you could use this in a each loop.
Example case
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>255 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$( '#table_id tbody tr td:last-child').each(function(){
var $MyObject = $(this); // this here referer to the current object of the loop
$MyObject.attr( 'data-order', $MyObject.text());
});
You can do it like this
var lastTd = $( '#table_id tbody tr td:last-child');
lastTd.attr( 'data-order', lastTd.html());
Please take a look at below code snippet:
$(document).ready(function() {
$( '#table_id tbody tr').each(function(){
$(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>2551 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>2552 5002</td>
</tr>
</tbody>
</table>
Used to .each function as like this
$(document).ready(function(){
$('#table_id tr td:last-child').each(function(){
var thisText = $(this).text();
$(this).attr('data-order',thisText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#table_id tr td:last-child').each(function () {
$(this).attr('data-order', $(this).text());
});
});
You can simply use the data()
$('#table_id tr td:last-child').each(function(){
var text= $(this).text();
$(this).data('order',text);
});

filter the html table data using jquery

<table class="table table-hover">
<thead>
<tr><th> Block</th>
<th>Size</th></tr>
</thead>
<tbody id="poolTable" class="tbody">
<tr>
<td>78</td>
<td>18</td>
</tr>
<tr>
<td>52</td>
<td>21</td>
</tr>
<tr>
<td>54</td>
<td>19</td>
</tr>
</tbody>
</table>
Hi, I want to filter the html table data by using jquery,
can anyone try to resolve this please!!
Please try bellow JavaScript for to get content of each td
$("#filter").keyup(function(){
var filter = $(this).val();
$("#poolTable > tr").each(function(e){
cells = this.cells;
for(i=0; i< cells.length; i++){
alert(cells[i].innerHTML);
}
});
})
function filter(){
var text = $('#search').val();
$('#poolTable tr').show();
if (text != "") {
$('#poolTable tr td.number').each(function() {
if ($(this).text().indexOf(text) >= 0) {
$(this).parent().show();
return true;
} else {
$(this).parent().hide();
}
});
This works. Here number is the class name of td. It only filters the single column.
You can try this
https://sunnywalker.github.io/jQuery.FilterTable/
It is a jQuery plugin that will allow you to filter your table.

Footables column sorting is duplicating rows in table, Why?

I am adding footables to a table but the table has to have a tbody for each row. This is because I am adding footable sorting and filtering to an existing system that generates the html this way.
It seems to be causing the column sorting at the to be duplicating the table rows each time you try to sort the table by column heading and I cant see why.
The table structure is kinda like this:
<table data-filter="#filter" class="footable table demo">
<thead>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Job Title1</td>
<td>Active</td>
<td>Description1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name2</td>
<td>Job Title2</td>
<td>Disabled</td>
<td>Description2</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$("table").footable().bind("footable_filtering", function (e) {
var selected = $(".filter-status").find(":selected").text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
e.clear = !e.filter;
}
});
$(".clear-filter").click(function (e) {
e.preventDefault();
$(".filter-status").val("");
$("table.demo").trigger("footable_clear_filter");
});
$(".filter-status").change(function (e) {
e.preventDefault();
$("table.demo").trigger("footable_filter", {
filter: $("#filter").val()
});
});
});
I have also set up a working jsfiddle that demonstrates the issue:https://jsfiddle.net/35ht6kup/9/
Anybody have any idea how to resolve this?
You could rebuild the table with jQuery, example (to be refined with a better selector than 'table'):
$(document).ready(function(){
var thead = $('table thead');
var tbodyhtml;
$('table tbody').each(function(){
tbodyhtml += $(this).html();
});
$('table').html(thead);
$('table').append('<tbody>'+tbodyhtml+'</tbody>');
});

Categories