I have a lot of <tr class="form-items"> items inside my HTML code and I want to remove those tr's where <tbody> tag is empty.
I've tried $("tbody:empty").closest('.form-items').remove() but it is not the good solution.
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
</tbody>
</table>
</td>
</tr>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
<tr class="form-item-row">
<td class="fill-form">
<a>test #1</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
:empty: Select all elements that have no children (including text nodes).
In your case you have text nodes. Hence your selector cannot work.
Use this other approach (a tbody with no rows):
$("tbody:not(:has(tr))")
The snippet:
$("tbody:not(:has(tr))").closest('.form-items').remove();
console.log($('table')[0].outerHTML)
.as-console {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
</tbody>
</table>
</td>
</tr>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
<tr class="form-item-row">
<td class="fill-form">
<a>test #1</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Search for first element in DOM, if exists and child contents of are empty then remove it, if not exit the loop.
console.log('Before deletion', document.body.innerHTML)
while (true) {
var elem = document.getElementsByTagName('tbody')[0];
if (elem && !elem.innerHTML.trim()) {
elem.parentNode.removeChild(elem);
} else {
break
}
}
console.log('After deletion', document.body.innerHTML)
or even better approach get all elements first then loop through them.
const tbodyElements = document.getElementsByTagName('tbody')
for (let i = 0; i < tbodyElements.length; i++) {
if (!tbodyElements[i].innerHTML.trim()) {
tbodyElements[i].parentNode.removeChild(tbodyElements[i]);
}
}
Related
I have a DOM tree as follow :
console.log($("table td:not(.customWrap)"));
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<table>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</table>
I use a selector $("table td:not(.customWrap)") to get some node that include 1,2,4.
But with this selector, I filter the node td.customWrap successfully and not filter its children <td class="noWrap">3<td>.
Actually, I don't want to get the node that has 3.
Try This : you have to just change $("table td:not(.customWrap * , .customWrap)")
$(function() {
$("table td:not(.customWrap * , .customWrap)").each(function() {
console.log($(this).text())
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<td class="noWrap">1
<td>
<td class="noWrap">2
<td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3
<td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</table>
You could use something like this:
var s = $("table td").filter(function() {
return $(this).closest('.customWrap').length == 0
});
Working demo
var s = $("table td").filter(function() {
return $(this).closest('.customWrap').length == 0
});
console.log(s)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
</tr>
</table>
You can tell it not to return nested table td
Note this code only works if you have 1 levels of nested tables
console.log($("table tr td").not(".customWrap").not("table table tr td").text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<tr>
<td class="noWrap">1<td>
<td class="noWrap">2<td>
<td class="customWrap">
<table >
<tr>
<td class="noWrap">3<td>
</tr>
</table>
<td>
<td class="noWrap">4<td>
</tr>
</table>
If you need just the first level you could give your parent table an identifier then use the greater-than sign (>) in your selector like:
"#parent_table > tbody > tr > td.noWrap"
console.log( $("#parent_table > tbody > tr > td.noWrap").length + " Items" );
console.log( $("#parent_table > tbody > tr > td.noWrap").text() );
console.log( $("#parent_table > tbody > tr > td.noWrap") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="parent_table" border=1>
<tr>
<td class="noWrap">1</td>
<td class="noWrap">2</td>
<td class="customWrap">
<table>
<tr>
<td class="noWrap">3</td>
</tr>
</table>
</td>
<td class="noWrap">4</td>
<tr>
</table>
I've a table in my code which contains lots of rows and every row contains some td's, I want to find all the td's having z-index value.
For Example -
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
Can anybody help me to find all the td's having z-index value without using any loop?
You can find all the td's, then filter out those which don't have any z-index set. I'm fairly sure there's no way to do the initial select on a more specific level than this.
const test = [
...document.getElementsByTagName("td")
].filter(x => x.style.zIndex !== "")
test.forEach(x => x.style.color = "#"+((1<<24)*Math.random()|0).toString(16))
console.dir(test)
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
So this is give you the same result but with jquery and this is why i added a
position:relative
For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative )
$(document).ready(function() {
$("td").each(function() {
// td Element
const $this = $(this);
// your logic condition
if ($this.css("z-index") !== "auto") {
$this.css("color", "red");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style=" position: relative; z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style=" position: relative; z-index: 20">jam</td>
</tr>
</tbody>
</table>
I have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.
Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)
How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();
The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
This is my html table
<table>
<thead>
<tr>
<td class="td20"><h3>Patient Name</h3></td>
<td class="td20"><h3>Summary</h3></td>
<td class="td20"> <h3>Created</h3></td>
<td class="td20"><h3>Last visit</h3></td>
<td class="td20"> <h3>Refer to a Doctor</h3></td>
</tr>
</thead>
<tbody id="patient_table">
<tr id="1">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
<tr id="2">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
</tbody>
</table>
This is my script:
$("#patient_table").click(function(e) {
var id = $(this).children('tr').attr('id');
alert(id);
});
The <tr> is generated dynamically inside the <tbody>.
I need to find the id of <tr> on click of <tr> itself.
With the script I'm always getting the first <tr> id only irrespective of the second <tr> click.
Use this instead:
$("#patient_table").on('click','td',function (e) {
var id = $(this).closest('tr').attr('id');
alert(id);
});
jsFiddle example
Since you mentioned the rows being generated dynamically you want to use .on() to delegate the event handling to the table cells.