Okay,
This may sound easier than it is, I need to use either Javascript or jQuery to remove a <tr> from a table, I don't know what row this <tr> will be, nor do i know which <tr> I will be removing and the only way I can find out which <tr> to remove is from the text inside the child's <td>.
I cannot use the :contains() selector from jQuery as I'm using ajax to get the elements and it just seems broken.
$("td:contains(var)").parent().remove();
just gives me a DOMexception error.
Is there a way I can loop through all the <td>'s in a table and check the text contents of them?
This will check the text of each one:
$('tr').each(function() {
var $tds = $(this).find('td');
$tds.each(function() {
if ($(this).text() === "some text") {
$(this).parent().remove()
}
});
})
Related
I need to get all selector that match the condition so I can iterate thru it later on. My code does not return any values. Probably syntax is wrong so I would appreciate if you help me (haven't written lots in js).
Here is the html
function restore_hp(){
var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing > tr > td[2]");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
}
You are probably looking for td:nth-child(2) at the end of your selector.
Your current td[2] would select such a table cell: <td 2="some-attribute-value">...</td>. Notice that this would be invalid HTML because a) 2 is an invalid attribut identifier (cannot start with a number) and b) even if it in general would be valid syntax it wouldn't be known for HTMLTableCellElement, and thus again, invalid HTML.
2nd issue:
> selects direct children only. tr is not a direct child of your table (it never is, missing tbody is auto-inserted by all browsers).
What you want is something called :nth-child pseudo selector. Learn more from the below link-
https://www.w3schools.com/cssref/sel_nth-child.asp
SO your function may be like-
function restore_hp(){
var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing tr td:nth-child(2)");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
}
Codepen: https://codepen.io/ashfaq_haq/pen/WNNOYRR
You can add a HTML class to the elements you want to manipulate and simply query on the class :
...
<tr>
<td>Some text</td>
<td class="my-custom-class">Some other text</td>
</tr>
...
var percent_restore = document.querySelectorAll(".my-custom-class");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
That way you're not lost in your HTML tree.
I have a 3 tables that every row have 2 \ 4 \ 6 columns , and the last column contains a edit button.
When I press the edit button, I want all the other td's will turn into a textboxes.
The script:
$(".icon-pencil").click(function () {
var row = $(this).parent('td').parent('tr');
row.find('td').each(function () {
$(this).html("hi");
});
});
a row example:
<tr>
<td>1</td>
<td>
<img src="img/couponimg.png" alt="" />
</td>
<td>1</td>
<td>A coupon for ..</td>
<td><i class="icon-pencil"></i>
</td>
<td><i class="icon-remove"></i>
</td>
</tr>
It works as I want, but it applies the change to all the <td> , and I don't want to change the last one.
How to prevent to affect to the last one?
I recommend event delegation.
$(document).on('click', '.icon-pencil', function () {
$(this).closest('tr').find('td:not(:last)').html("hi");
});
Also,
$('something').each(function() {
$(this).html("hi");
});
is equivalent to
$('something').html("hi");
Try this:
row.find('td').each(function() {
$(this).not('td:last-child').html("hi");
});
Try this and use :not(:nth-last-child(-n+2)) which will EXCLUDE the last 2 columns.
$(".icon-pencil").click(function() {
var row = $(this).closest('tr');
row.find('td:not(:nth-last-child(-n+2))').each(function() {
$(this).html("hi");
});
});
example :
http://jsbin.com/oyUvAhi/2/edit
2 changes :
closest instead of .parent('td').parent('tr')
when finding the TR - select only the relevant TD's for change.
Edit
please read #François Wahl comment - which helps shorten the code :
row.find('td:not(:nth-last-child(-n+2))').html("hi");
Since your HTML is well formed, in this particular situation, the :last CSS selector works nicely, so you can use that. I will give you a more general solution, when the element is not the last node in the parent, or perhaps not even the last node of its type in the parent (:last-of-type).
jQuery objects are collections of elements. The CSS selector usually used to create such a collection is matched on the DOM, but once you have a jQuery object you can manipulate it any way you want. If you want to eliminate the last element, you can do something like this:
var myJQueryObject = $('mySelector');
Array.prototype.splice.call(myJQueryObject, myJQueryObject.length-2, 2); // removed the last two elements
This relies on the fact that jQuery objects are Array-like objects (have a length property and numeric-like keys) and Array.prototype.* methods work on Array-like objects.
This question is the root cause for my question.
Hide all next tr td until next tr th
As already two answers being posted , I thought of trying something different
Javascript:
$(function(){
var thList = $('td');
$('td').click(function(){
for( i =0; i < thList.length;i++){
// What to do here
}
});
});
HTML:
<table border="2">
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<table>
What am doing here is
Assigning click event to <TH> element. And on load , am getting all the <TH> in the DOM in an Array.
Now, my logic is. Iterate the for loop and if the clicked TH is not the one in the for loop, then hide it.
What i tried is
if ( thList[i] != $(this)) { thList[i].style.display = 'none' }
But this does not seem to be working. what code I need to put there to compare the object
Besides the fact, that you example markup does not contain any th-elements, you could try the following:
$('td').click(function(){
var $tdList = $('td').not(this); // <- get all th's and exlude the clicked element
$tdList.each(function(){this.style.display = 'none'; });
});
or even better, use jQuery, you don't need a each wrapper then:
$tdList.hide();
Since jQuery saves you a lot of work, try to use it whenever you can - use the each() instead of for-loops and use .css() (or even more dedicated methods like .hide()) instead of the native .style - this should shorten your code significantly.
You can use:
thList.click(function() {
thList.not(this).css("display", "none");
});
For performance reason you could delegate the event instead:
$("#yourtable").on("click", "th", function(event) {
thList.not(event.target).css("display", "none");
});
I didn't test it, but should works.
However I'm curious about the UI: if the TH are hidden in this way, they can't be displayed anymore after the first click of any of them.
1-You $(this) is diferent of this once is a jquery object
2-You dont have a TH element here is the code similar that you want but whit td's
$(function(){
var tdList = $('td');
$('td').click(function(){
tdList.hide();
$(this).show();
//OR tdList.not(this).hide();
});
});
When you are accessing the items in a jQuery object, you get them as DOM elements, not as new jQuery objects. So, you should compare it to the element reference directly, not wrap the element reference in a jQuery object:
for (i = 0; i < thList.length; i++) {
if ( thList[i] != this) { thList[i].style.display = 'none' }
}
You can also use the not method to get a collection without the current element:
thList.not(this).each(function(){ this.style.display = 'none'; });
Of course, using the css method it becomes even simpler:
thList.not(this).css('display', 'none');
Word of caution: The cells in tables are not really separate elements that you can just hide without affecting the other cells in the table. The table can show unexpected behaviour when you hide cells in it.
I have table with numbers tht needs to be summarize.
Example:
<td class="mcost_el.entry[0]">93,08</td>
<td class="mcost_el.entry[1]">544,33</td>
How get all values of td elements with class mcost_el.entry[] and summarize it?
For inputs i'm use $('#d1').attr("value");. Is suitable for this task? (by adding value="" for td)
You can use .text() rather than what you have suggested.
Update your HTML to
<td class="mcost_el">93,08</td>
<td class="mcost_el">544,33</td>
Add in javascript for
var _total = 0;
$(function(){
$('.mcost_el').each(function(){
_total += parseFloat($(this).text()); // will give you the value.
});
});
Example http://jsfiddle.net/tqH4y/
Also, rather than using .attr("value") in the future, you can just use .val()
var tdtotal = 0;
$("td[class^='mcost_el.entry[']").each(function() {
tdtotal += parseInt($(this).text().replace(",",""));
})
alert(tdtotal);
Working demo - http://jsfiddle.net/ipr101/vnXCr/2/
I'm not quite sure i'm answering correctly here, its unclear if you are seeking a way to get text from a TD element, or wether your having trouble targetting all td's with a certain class (selector issues)
.attr("value") or better .val() is for input fields
if you want to get text from a TD element, you should be using:
$('td').text();
I'm a beginner and this is my first time encountering problem like this.
I'm iterating a class using the each method provided by jQuery. The page have many class with the same name. So we can expect that it may be 15 iterations.
Each iteration have different value.
$(".book").each(function(n) {
var result = $(this
I have to get the last TD with the value List. So my option is to use
$(".book tbody tr:last")
But I think this thing wouldn't work in the each environment because it won't know which context it is currently processing.
The $(this tbody tr:last) wouldn't work also. How can I devised a selector that will work?
<div class = "book">
<p class = "chapter">
<table>
<tbody>
<tr>
<td>General</td>
<td>
<b>Buck</b>
</td>
</tr>
<tr>
<td>General</td>
<td>List</td>
</tr>
</tbody>
</table>
</p>
</div>
Assuming the HTML you posted there is a single book and there are many others exactly like it, and you want access to the last <tr> in each one of them, this should work:
$('div.book tbody tr:last-child').each(function() {
var value = $(this).find('td').eq(1).text();
});
value would then be "List" with the HTML above, and if you have several <div>s it would iterate as you might expect through the last <tr> of each one of them.
The key here is that we are using last-child instead of simply last. The last documentation says that it will match the last selected element; we don't want that. What we want instead is what last-child describes: Matches all elements that are the last child of their parent. This distinction is important in this particular case as we only want the last child of the particular table we're currently in, we don't want the last result overall.
If you wanted the last <td> in each last <tr>, we could even do this:
$('div.book tbody tr:last-child td:last-child').each(function() {
var value = $(this).text();
});
This selector would select each last child <tr> and select its appropiate last-child <td>. This would be best if you don't care what the value of the first <td> is. If you do then you want to use the first one.
If you're only looping over the tr:last elements, Paolo's answer should work for you. However, if you're need to run more than one query against each div.book, try this instead:
$("div.book").each(function() {
$("tbody tr:last", this).doStuff();
$("p.chapter", this).doOtherStuff();
}
The second argument to the dollar function is the "context node" and defaults to document (i.e. it "searches" the entire DOM).