Replace the text inside the td without touching the other child elements - javascript

I have this:
<td class="cant_formula numeric">
0.007
<input type="hidden" value="0.015" class="cant_formula"/>
</td>
I want to replace the text inside it, I tried these ways:
$('td.cant_formula.numeric').contents().first()[0].textContent='fsdfwffwwfwf';
but it doest not work!!
Here is the fiddle: https://jsfiddle.net/gp5gmmgx/
Can you help me, What Im doing wrong??

Look at this https://jsfiddle.net/gp5gmmgx/2/
$('td.cant_formula.numeric').contents()
.filter(function() {
return this.nodeType == 3; //Node.TEXT_NODE
})
.get(0).nodeValue = 'test';
table element is required else td elements aren't selected;
about selecting text nodes read https://stackoverflow.com/a/298758/3349900.

jsFiddle doesn't seem to work with that version of jQuery. (I can't even get a simple alert to work.)
Upgrade to at least v 1.9.1
Also, td elements must be within tr elements, which must be within a table.
https://jsfiddle.net/0rnLa9j1/

Try
$('td.cant_formula.numeric').text("text");
Actually after testing, this replaces all the contents of the td not just the text. I should have listened to my gut and double checked before answering, apologies!

Related

Removing <tr> from table without :contains()

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()
}
});
})

Combine usage of .not() and .empty()

I have a variable named MYCELL which is a reference to a td inside a table.
the td looks as follows
<td>
abc
edit
</td>
Right now i wish to replace that string abc with def but keep the link.
I thought i could use the following code:
MYCELL.not(".myLinkClass").empty();
MYCELL.append("def");
But the empty() clears the entire cell.
Based on this link i opted to use a selector inside my .not() statement
MYCELL.not(MYCELL.find(".myLinkClass")).empty();
Any idea on how to empty (including other html-tags) everything in my td without removing any links (<a href>) or any elements with the class .myLinkClass ?
Thank you for your time
You need to use contents() to ensure you can select text nodes as well:
MYCELL.contents().filter(function() {
return !$(this).is("a"); // Only select nodes where are not <a> tags
}).remove(); // Use .remove instead
jsFiddle

How to hide HTML element containing only spaces using jQuery?

I have the following HTML :
<div id="rightCon">
</div>
And then I have the following script at the top :
$('#rightCon:empty').hide();
Why is the div not hiding? I can see that there is some spaces(that I canĀ“t get ridoff) but does that really matter? How do I remove/hide this div when its empty with only spaces?
Your element appears to have a bunch of white space, which will give it a text node. It won't be matched by :empty for that reason.
You could try finding the element and checking it's contents explicitly:
$('#rightCon').filter(function() {
var text = $(this).text().replace(/\s*/g, '');
return !text;
}).hide();
This solved the problem.
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});
Your div is not actually empty (It contains whitespace). So the selector $("#rightCon:empty") will never evaluate and hide the div.
Since HTML elements should be unique, you can safely assume that you can select the correct element via:
var rightCon = $("#rightCon");
You can then hide the element via:
right.hide();
Or
$("#rightCon").hide();

How to get value of td elemets on JQuery?

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();

add text within td tag in IE using jquery

I have the following HTML code
<td class="testclass"> </td>
I'm trying with the following jquery:
$('testclass').each(function () {
$(this).text("testtext");
});
This code is working file in FF but not in IE. Can any one let me know how i can resolve this in IE?
Is the problem in your selector? You need a "." to select on classes, so like:
$('.testclass').each(/*etc*/);
You are missing a period in the selector.
Also, you don't need to loop at all, the text method sets the text of all matched elements:
$('.testclass').text("testtext");

Categories

Resources