I'm trying to remove any tr from table that has less than 4 td inside.
So for example, in this table I want second tr to go away:
HTML
<table>
<tbdy>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
I'm trying with something like this
jQuery
if ($('table tbody tr td').length >= 4) {
//4 i ok so do nothing
} else {
$(this).parent("tr").remove();
}
But I getting nowhere with this.
Any help?
Use jQuery :has() selector with :not() and :nth-child() pseudo-class selector.
$('tr:not(:has(:nth-child(4)))').remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Or alternatively, use filter() method to filter out element only contains td less than 4 and remove.
$('tr').filter(function() {
return $(this).children('td').length < 4;
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
This should work:
$('table tbody tr').each(function() {
var $tr = $(this);
if ($tr.find('> td').length < 4) {
$tr.remove();
}
});
Your structure should be :
<table>
<tbody>
<tr>
And you can select it with :
$('table tbody tr')
To get all tr with less than 4 columns you should loop through them.
Your final code should be :
$('table tbody tr').each(function() {
var row = $(this);
if (row.find('td').length < 4) {
row.remove();
}
});
Related
I have a row in a table with the head of the row and 96 cells.
Each row is clickable by the following function
$("#table tr").click(function(){});
Now by getting value from 0 to 96, I need to get the td in the place X and do a colspan on it.
As in the form, I get value 40 I need to make the colspan on the 40th td in the clicked row.
How can I implement something like that in JavaScript or jQuery?
Thank's to Pete comment I've got how to get td to which change the attribute, the problem now is if I colspan the cell the table become deformed as on the screen
You can try something like this. You need to add colspan attribute first and then need to remove last cells as below:
$(document).ready(function(){
$("#tables tr").click(function() {
let position = 2;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
$(`td:eq(${position+colspan})`, this).nextAll().remove();
});
});
Hope it helps you ;)
You could use the jQuery selector :eq() to get the position you want with the prop() method that will set the colspan attribute, like :
$("#table tr").click(function() {
let position = 5;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
i have a table with this basic structure:
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<body>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
and i want to remove the second child from every "tr" tag, so i would like to do something like this:
const rows = document.getElementsByTagName('td')
for (let i = 0; i < rows.length; i++) {
rows[i].removeChild(target the second child here)
}
i'm looking for a solution with pure vanilla javascript (no jquery)
You might select the tds you want to remove via a single selector string, it's probably more elegant:
document.querySelectorAll('td:nth-child(2)')
.forEach(td => td.remove());
<table>
<thead>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tbody>
</table>
If the HTML is valid, the tds will necessarily be children of trs regardless, so you don't need to specify that the td's parent is a tr.
If you want to target a specific table on the page, rather than every td in every table, just put the table identifier in front of the selector string. Eg. if the target table's ID is 'table3', then use the selector string '#table3 td:nth-child(2)' to indicate td which are the second child in their parent, which are descendants of the element with ID table3.
In VanillaJS you can use document.querySelectorAll() and walk over the 2nd td using forEach()
[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
td.remove();
});
//$("#myTable td:nth-child(2)").remove()
[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
td.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
</thead>
<tbody>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
</tbody>
</table>
You can use a query selector with nth-child.
const rows = document.getElementsByTagName('tr')
for (let i = 0; i < rows.length; i++) {
rows[i].removeChild(rows[i].querySelector('td:nth-child(2)'));
}
<table>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script>
var rows = document.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) {
var row = rows[i];
var td = row.querySelector('td:nth-child(2)');
row.removeChild(td);
}
</script>
I have an unfinished table structure:
<table>
<tr>
<td>ID</td>
<td>Animal</td>
<td>color</td>
<td>age</td>
</tr>
<tr>
<td rowspan="2">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
</table>
I want to append the following rows:
<table>
<tr>
<td>dog</td>
<td>brown</td>
<td>5</td>
</tr>
<tr>
<td>cat</td>
<td>white</td>
<td>3</td>
</tr>
<tr>
<td>cat</td>
<td>black</td>
<td>7</td>
</tr>
<tr>
<td>mouse</td>
<td>grey</td>
<td>2</td>
</tr>
</table>
So that the final table looks like that:
<table>
<tr>
<td>ID</td>
<td>Animal</td>
<td>color</td>
<td>age</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>dog</td>
<td>brown</td>
<td>5</td>
</tr>
<tr>
<td>cat</td>
<td>white</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>cat</td>
<td>black</td>
<td>7</td>
</tr>
<tr>
<td>mouse</td>
<td>grey</td>
<td>2</td>
</tr>
</table>
I'm creating that table dynamically, in an each-loop, so row by row.
That is my approach:
// 1st iteration
tr = "<tr><td>dog</td><td>brown</td><td>5</td></tr>";
$('table tr:eq(1)').append(tr)
// 2nd iteration
tr = "<tr><td>cat</td><td>white</td><td>3</td></tr>";
$('table tr:eq(1)').append(tr)
But the result doesn't look as intended.
Here is a fiddle.
In the first iteration you should append tr body in existing row (without parent tag).
In the second iteration you should put tr after existing row.
/* The rows to append
<tr><td>dog</td><td>brown</td><td>5</td></tr>
<tr><td>cat</td><td>white</td><td>3</td></tr>
<tr><td>cat</td><td>black</td><td>7</td></tr>
<tr><td>mouse</td><td>grey</td><td>2</td></tr>
*/
// 1st iteration
tr = "<tr><td>dog</td><td>brown</td><td>5</td></tr>";
$('table tr:eq(1)').append($(tr).html())
// 2nd iteration
tr = "<tr><td>cat</td><td>white</td><td>3</td></tr>";
$('table tr:eq(1)').after(tr)
// 3rd iteration
tr = "<tr><td>cat</td><td>black</td><td>7</td></tr>";
$('table tr:eq(3)').append($(tr).html())
// 4th iteration
tr = "<tr><td>mouse</td><td>grey</td><td>2</td></tr>";
$('table tr:eq(3)').after(tr)
table,
tr,
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>ID</td>
<td>Animal</td>
<td>color</td>
<td>age</td>
</tr>
<tr>
<td rowspan="2">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
</table>
The first iteration should only include the <td>s and not a <tr> since you are adding it to an existing row. You don't want to append a <tr> to another <tr>
Use after() in the second iteration. Here you should use a <tr>
Try changing it to something like this:
// 1st iteration
tr = "<td>dog</td><td>brown</td><td>5</td>";
$('table tr:eq(1)').append(tr)
// 2nd iteration
tr = "<tr><td>cat</td><td>white</td><td>3</td></tr>";
$('table tr:eq(1)').after(tr)
You need to add row number every odd list item. That way you can add as many
item as possible to your table.
var data = [
'<tr><td>dog</td><td>brown</td><td>5</td></tr>',
'<tr><td>cat</td><td>white</td><td>3</td></tr>',
'<tr><td>cat</td><td>black</td><td>7</td></tr>',
'<tr><td>mouse</td><td>grey</td><td>2</td></tr>',
'<tr><td>dog</td><td>brown</td><td>5</td></tr>',
'<tr><td>cat</td><td>white</td><td>3</td></tr>',
'<tr><td>cat</td><td>black</td><td>7</td></tr>',
'<tr><td>mouse</td><td>grey</td><td>2</td></tr>'
];
var rowNo = 1;
for (var i = 0; i <= data.length; i++) {
var $current = $(data[i]); // Converting data to jQuery item.
// On every odd row add row Number cell to the begining of <tr> tag.
if ((i + 1) % 2 == 1) {
$current.prepend('<td rowspan="2">' + rowNo + '</td>');
rowNo++;
}
$('table').append($current);
}
table,
tr,
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>ID</td>
<td>Animal</td>
<td>color</td>
<td>age</td>
</tr>
</table>
I also updated your JSFiddle. Check this out: JSFiddle
I want to be able to add a class to a TR element, dependent on the value of the first TD element.
For example:
If I have the following array of data:
[1,2,3,4]
[5,6,7,8]
Where each array represents a tr, with each element being a td, I would like to highlight the TR where the first TD equals 5 for instance.
How would i go about doing this?
Thanks,
Below example can help!
$(function() {
var tr = $('tr').find('td:first-child');
tr.each(function() {
if ($(this).text() == 5)
$(this).parent('tr').addClass('highlight');
});
});
tr.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
I managed to solve this by using the fnRowCallback function
'fnRowCallback': function(nRow, aData, iDisplayIndex) {
$(nRow).css('cursor', 'pointer');
$(nRow).prop('title', 'Select Company');
if (aData.CompId === "COMP01") {
$(nRow).find('td').addClass('selectedCompany');
}
return nRow;
},
You can use first-child and :contains with Jquery
$('td:first-child:contains("5")').parent('tr').addClass('selected')
tr.selected {
background: yellow;
}
tr.selected td:first-child {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
</tr>
</table>
Edit Note:: This will select all first td with 5 on the string
Assume the content of the desired row td is "two", either of these would work:
$(document).ready(function() {
var findMe = "two";
$('#mytable').find('tr').filter(function(index) {
var isTwo = $(this).find('td').eq(0).text() === findMe;
return isTwo;
}).addClass('highlight');
$('#mytable').find('tr').find('td:first').filter(':contains("' + findMe + '")').parent('tr').addClass('highlight');
});
I have a table that include rows that any row has a attribute which called entity-state. I have get all td from rows that entity-state !== 'deleted'.
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
I want get all td values that are in rows that entity-state is added only.
You can use the attribute selector for this:
$('tr[entity-state="added"]');
// or
// $('tr:not([entity-state="deleted"])');
You should note that entity-state is a non-standard attribute and will mean your HTML is invalid. To solve this you should use a data-* attribute instead:
<tr data-entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr data-entity-state="added">
<td>3</td>
<td>4</td>
</tr>
$('tr[data-entity-state="added"]');
It's also possible to achieve what you need using filter(), which is useful when using data-* attributes as changing their values through jQuery does not update the DOM.
var $enabledRows = $('tr').filter(function() {
return $(this).data('entity-state') == 'added';
// or:
// return $(this).data('entity-state') !== 'deleted';
});
You can use combination of attribute equals selector and :not() (or not()) selector
$('tr:not([entity-state="deleted"])')
or
$('tr').not('[entity-state="deleted"]')
$('tr:not([entity-state="deleted"])')
// or $('tr').not('[entity-state="deleted"]')
.css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
You can use not selector with attribute selector,
$("tr:not([entity-state='deleted']) td").each(function() {
console.log($(this).text())
});
$('table tr[entity-state=added]').each(function(i,v){
var $td = $(this).find('td')
console.log($td.text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
Use the attr selector for this