I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.
<html>
<head>
<style type='text/css'>
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<table border="1" id="MyTable">
<tr>
<td></td> <td>blue</td>
</tr>
<tr>
<td></td><td>red</td>
</tr>
<tr>
<td></td><td>black</td>
</tr>
</table>
</body>
</html>
I tried with following script but it showing row counter as text. How to get the value of first td?
<script>
$("#MyTable").find('tr').each(function (i, el) {
$(this).find('td:eq(0)').each(function () {
console.log(window.getComputedStyle(this, ':before').content);
});
});
</script>
Based on this:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.
So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:
But this is result:
So generated content does not alter the document tree and you can't access to value of it.
There are lots of alternative you can do it:
$("#MyTable").find('tr').each(function (i, el) {
debugger
$(this).find('td:eq(0)').each(function (index, el) {
$(this).html(i+1)
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>
Update
You can rest number after each modification on your table:
function setnumber() {
$('#MyTable tbody tr').each(function (i) {
$($(this).find('td')[0]).html(i + 1);
});
}
$(".delete").click(function () {
$(this).closest('tr').remove();
setnumber();
});
setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>red</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>black</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
</tbody>
</table>
Probably, you want to put 1,2,3 in TDS on DOM.
You can do like this:
$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });
https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js
You can use child selector to select the child of tr
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();
Related
I have a table generated in a backend. My task is to wrap text in each header column and add it to each body column cells by using .html() and .prepend(). It works as expected (you will see text in green).
Problem: Tables are generated in a backend, sometimes a table has 3 columns, sometimes 4 columns or more! How to write my Jquery dynamically in order to work on each table.
Please give me a hand. Thanks!
$(document).ready(function() {
var firstHead = $("table thead tr th:first-child").html();
var firstBodyCode = $("<span></span>").text(firstHead);
$('table tbody tr td:first-child').prepend(firstBodyCode);
var secondHead = $("table thead tr th:nth-child(2)").html();
var secondBodyCode = $("<span></span>").text(secondHead);
$('table tbody tr td:nth-child(2)').prepend(secondBodyCode);
});
table {
width: 100%;
border: 1px solid gray
}
span {
color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Use a loop to iterate over all the columns.
$(document).ready(function() {
$("table thead tr th").each(function(i) {
let bodyCode = $("<span>", {
text: $(this).text()
});
$(`table tbody tr td:nth-child(${i+1})`).prepend(bodyCode);
});
});
table {
width: 100%;
border: 1px solid gray
}
span {
color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.
To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});
You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>
I started on that http://jsfiddle.net/DRFBG/
And if I add tables so mytable1, mytable2,...
<table id="mytable1" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>
<table id="mytable2" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>
How could I uniform my javascript code for all tables?
I've already tried passing by table[div^=mytable]*, but the problem is the second selector in the function.
So any ideas please? Thank you? Sorry for my english
By the way, the code is to remove th with empty td for each table
$('#mytable2 th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable2 tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
One approach is, selecting tables first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:
$('table').each(function()
{
var tb_id = $(this).attr('id');
$('#'+tb_id+' th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#'+tb_id+' tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
});
Here is the working jsfiddle
To select all on your page you can use "table" selector.
So you'd need to use $('table2 th') instead of $('#mytable2 th')
One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.
Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:
$('table').each(function() {
var $table = $(this);
var rows = $table.find('tr').length - 1; // -1 to account for the headings
$table.find('th').each(function(i, th) {
var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
if ($empty.length == rows)
$empty.add(this).addClass('to-remove');
})
$table.find('.to-remove').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td></td>
<td>1</td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td></td>
<td>2</td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td></td>
<td>3</td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td></td>
<td>4</td>
</tr>
</table>
<table id="mytable2" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td>1</td>
<td></td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td>2</td>
<td></td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td>3</td>
<td></td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td>4</td>
<td></td>
</tr>
</table>
I have the following table with buttons on a simple HTML.
I need the buttons to be able to remove the current table and draw a new table (with a different content) to the DOM without reloading the page.
I have a JQuery method for removing the current table element, however I struggle with adding another table.
How can a table be added efficiently?
<!DOCTYPE HTML>
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.header-class{
font-size:25px;
font-family:cursive;
background-color:lightgray;
cursor:pointer;
}
.members {
font-family:helvetica;
}
.blips {
color:red;
}
.crudz {
color:blue;
}
.satin-flings {
color:rgb(213, 194, 0);
}
td {
padding-right:10px;
padding-left:10px;
border: 10px;
}
</style>
<body>
<button class="tableRevmoveButton"> Remove table </button>
<button class="tableAddButton"> Add table </button>
<button class="tableAddNewButton"> Add different table </button>
<div class="tabel">
<table class="itdev_people">
<tr class="header-class">
<td colspan="4">The Blips</td>
</tr>
<tr class="members blips">
<td>Rotton </td>
<td>Rob</td>
<td>ttt</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="header-class">
<td colspan="2">The Crudz</td>
</tr>
<tr class="members crudz">
<td>Jason</td>
<td>"Sky" Halker</td>
</tr>
<tr class="members crudz">
<td>Sparky</td>
<td>That stupid Eagle</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
</table>
</div>
<script>
//Table action
$('.header-class').click(function() {
console.log('clicked');
if ($(this).hasClass('collapsed')) {
$(this)
.nextUntil('tr.header-class')
.find('td')
.parent()
.find('td > div')
.slideDown('fast', function() {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass('collapsed');
} else {
$(this)
.nextUntil('tr.header-class')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp('fast');
$(this).addClass('collapsed');
}
});
//Table Remove Button action
$('.tableRevmoveButton').click(function() {
$('.tabel').remove();
console.log('Remove table');
});
//Table add Button action für add
$('.tableAddButton').click(function() {
$('body').append('.tabel');
console.log('Add table');
});
</script>
</body>
</html>
if you have class for table which i guess you are having .tabel then use this
$('.tableAddButton').click(function() {
$('body').addClass('.tabel');
console.log('Add table');
});
but if dont have a class and want to create table with html code in script then
$('.tableAddButton').click(function() {
$('body').append('<table><thead>...</thead>...</table>');
console.log('Add table');
});
or if you want only table in the body
$('.tableAddButton').click(function() {
$('body').html('<table><thead>...</thead>...</table>');
console.log('Add table');
});
It shouldn't be too difficult using the .append() JQuery function. When the button is clicked, select the tableDiv that you want to add the new table to, and then append table html.
$("#btn").click(function(){
$("#tableDiv").append("<table><tr><th>Appended table</th></tr></table>");
});
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);
});