I'm generating a table based on some external data. Every row does not have data in the columns I'm returning. I'd like to delete the row that have all cells empty. I have found some code to delete the row if one cell is empty, but one empty cell is allowed. I'd like to delete the first and third rows.
I've tried this, but it deletes all rows:
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
$("td").each(function() {
if (this.innerText === '') {
this.closest('tr').remove();
}
});
Simply modify your script to iterate over tr elements instead of td.
If the text content of a tr row is blank, that means all of its cells are blank, as well. Here's a working demo:
$("tr").each(function() {
if (!$(this).text().trim()) {
this.remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
</table>
You can use each of the tr elements like this. Hope to help, my friend :))
$('tr').filter(
function(){
return $(this).find('td').length == $(this).find('td:empty').length;
}).hide();
http://jsfiddle.net/1g7hqkvb/
Related
I have a table as shown:
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> //Assume that this cell indicate the column I need to select
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td> //So the last cell in the 'A' column is the one I want to add property, and A is known.
<td></td>
<td></td>
</tr>
</tbody>
</table>
All the need I have presented in the code.
I was trying using jQuery but I have no idea how to select as such. Hope your kind help!
You can try something like this, note: this will only work for the first and last rows, you will need different selectors if you have different rows
$('tr:first td').each(function(i,v){
if($(this).text() == "B") {
var index = $(v).index();//get the index of the colomn
$('tr:last td').eq(index).css('color','red');//select the element
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> <!--//Assume that this cell indicate the column I need to select-->
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>here</td><!-- //So the last cell in the 'A' column is the one I want to add property, and A is known.-->
<td></td>
<td></td>
</tr>
</tbody>
I have a table that i want to add automatic number for each row. I want the to appear on the second column.
This must be a straight forward thing to do, but just couldn't figure it out.i have follow the direction from Automatic Serial Number Row in HTML Table
but this only appear on the first column. i want that to appear on the second td:
Then use :nth-child psuedo selector, or you can use javascript to iterate over the rows and add the number to one of the cells. Both options are below:
document.querySelectorAll('table').forEach(function(table) {
var index = 1;
table.querySelectorAll('tr').forEach(function(row) {
row.querySelectorAll('td').forEach(function(column, position) {
if (position === 1) {
column.innerHTML = '' + index;
index++;
}
});
});
});
table{
counter-reset: serial-number; /* Set the serial number counter to 0 */
}
tr td:nth-child(3):before {
counter-increment: serial-number; /* Increment the serial number counter */
content: counter(serial-number); /* Display the counter */
}
<table>
<tr>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
<tr>
<td>F</td>
<td></td>
<td></td>
</tr>
<tr>
<td>G</td>
<td></td>
<td></td>
</tr>
</table>
Can we copy the data from thead to tbody? I only wanted to get the data-date
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
Can i copy the attribute of the thead tr td? to the tbody tr td? so it will also become
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</tbody>
Note that I cant manully put the attribute coz this is coming from a plugin
You can set header td value in an array then set it using that arraywith jQuery each() function. check updated snippet below..
var xyz = [];
$('table thead td').each(function(){
xyz.push($(this).data('date'));
})
$('table tbody td').each(function(i,el){
$(this).data('date', xyz[i]).html(xyz[i]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' celpadding="2">
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Try this solution. Get both tds and iterate over one, use that index and copy the data-date into the tbody tds.
const theadTds = $('thead tr td');
const tbodyTds = $('tbody tr td');
theadTds.each((index, td) => {
const tbodyTd = tbodyTds.eq(index); // Get current tbody td
tbodyTd.data('date', $(td).data('date')); // Set the `data-date` to the `thead td` `data-date`
console.log(tbodyTd.data('date'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
No need for any interim variables etc. Just iterate over the columns, this does ALL rows in body, if you just want first one you can do that also.
$('thead').find('tr').find('td').each(function(index){
$('tbody').find('tr').find('td').eq(index).data('date',$(this).data('date')):
});
Only first row in body
$('thead').find('tr').find('td').each(function(index){
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(this).data('date')):
});
Alternate syntax if that is more clear to you
$('thead').find('tr').find('td').each(function(index,element){
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(element).data('date')):
});
I have two html tables which I render in my react component and I want to create a third html table which is the concatenation of the first two tables. To be more specific I have a table:
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
and another table like this:
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
I want to create a table like
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
Any ideas of how I can implement this?
All you have to do is get the append the tr from the second table to the tbody of the first table. Javascript will take care of doing the removal from the second table as a part of the appendChild.
var tables = document.querySelectorAll("tbody");
tables[0].appendChild(tables[1].querySelector("tr"));
Table 1
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
Table 2
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds</td>
<td>fdsfsdfds</td>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
There is a html table with the following structure:
<table>
<tr class="header">
<td><img id="test_click" src=""></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="header">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
How can i hide all table rows between two using jquery?
This code does not work as i suspected :(
$("#test_click").click(function(){
$(this).parent().parent().nextUntil('tr.header').find('tr').hide();
});
nextUntill already selects your trs. No need to .find anything:
$("#test_click").click(function() {
$(this).parent().parent().nextUntil('tr.header').hide();
});
http://jsfiddle.net/nMBrw/