So, I have a table and there is a colum called value with different numbers that varies from 0 to 2.
<column>Values<column>
<td>0</td>
<td>2</td>
<td>0</td>
Yes, I know that something like does not exist, it was just for sake of example.
But the real question is, how can I with help of jquery find those numbers and replace it with something else.. for example
if(td == 1){
replace 1 with "Hello"
}
Use contains() to get td which have similar text and replace text using .text()
$("td:contains('1')").text("hello");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Well, it depends...
If you are refering to ALL the content of the cell as a numeric value, you can do this (in JS)
if(Number($(td).html().trim()) == number_to_replace){
$(td).html(text_for_replacement);
}
where "td" could referer to the cell as a DOM variable or could be a string selector
Can you give your elements Id's? This may make your code more readable and maintainable, and will remove the dependency between the value you are trying to replace and the code that is looking for it.
If you can use Id's, then you can use jQuery selectors to get hold of the element and then, depending on the element type, set the text or innerHtml to your required values.
Foe example;
$( document ).ready(function() {
$('#col1').text('hello');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td id="col1">1</td>
<td id="col2">2</td>
<td id="col3">3</td>
</tr>
</table>
or JsFiddle.net
Use :contains() pseudo-class to select all td which contains 1 and then use text() with callback to check content is exactly 1 and update.
$('td:contains(1)').text(function(i, v) {
return $.trim(v) == '1' ? 'hello' : v;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>11</td>
</tr>
</table>
Related
I'm trying to create an online calculator, using a table, with a tag that will have an output that changes. The output is the result of whatever math function is used on the calculator. So if someone puts in 5*5, the th should show 25. I tried using a variable, output, in javascript, and then using document.getElementsByTagName("th").innerHTML(output), to have it changing, but that didn't work. Then I tried the same command without a variable, and instead just directly inserting a string in the innerHTML and it still wasn't working. I also tried write(), but that didn't work either. Any ideas on what I can try?
This is my table (the id's and classes are just some style attributes in my css file):
<table class="center" style = "width:20%">
<tr>
<th colspan="4" id = "final">0</th>
</tr>
<tr id = "opRow">
<td>+</td>
<td>-</td>
<td>x</td>
<td>/</td>
</tr>
<tr class = "dataRow">
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan = "4" id = "eqBut">=</td>
</tr>
<tr class = "dataRow">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class = "dataRow">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class = "dataRow">
<td style = "width:26%" id = "acBut">ac</td>
<td>0</td>
<td>.</td>
</tr>
</table>
getElementsByTagName() returns an array and so you'll have to reference it like this:
document.getElementsByTagName("th")[0]
assuming that you only have 1 th tag on your current page.
plus innerHTML is a property of an element and not a method, so you'll have to rewrite:
document.getElementsByTagName("th")[0].innerHTML = output
Also, your current implementation should be throwing some errors in your browser console log please do check it out.
Method / function
getElementsByTagName
is returning an array with all available tags from your html, then you've only 1 th in your table so is result the th tag from your table is first [0], now use method mention to select th tag and select first element [0]
innerHTML - used to rewrite data as I know
and use it to rewrite cell.
So use that :
document.getElementsByTagName("th")[0].innerHTML = 52;
To check if is working try this :
document.addEventListener("DOMContentLoaded", function(){
document.getElementsByTagName("th")[0].innerHTML = 52;
});
Well, I hope that you understand what I want to say. Thanks.
This question already has answers here:
Using .text() to retrieve only text not nested in child tags
(30 answers)
Closed 1 year ago.
So I have this table below. And I want to get the text inside td.am-receipt-price but without getting the span text included.
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price"><del>price 1</del></span>
price 2
</td>
</tr>
</tbody>
</table>
console.log ( $(".am-receipt-price").text() ) would also return the text inside the span. I have tried .remove("span") but it wont work.
Am I missing any selector that I have not tried yet? thanks in advance.
The simplest solution would be to add another element around the target node and use a selector to retrieve it.
Assuming you cannot amend the HTML, then you can use contents() and filter() on the parent td to target the node and read its textContent.
let $td = $('.am-receipt-price');
let nodes = $td.contents().filter((i, n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== '');
console.log(nodes[0].textContent.trim());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>
An alternative to the already provided .contents() solution (if you need/want an alternative) is to use .clone() and .remove(), where you copy the html into a variable then you can do what you want with it without changing the original.
var price = $("td.am-receipt-price").clone();
price.find("span").remove();
console.log(price.text().trim())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>
It may be that your .remove("span") just had the wrong syntax:
$("td.am-receipt-price").find("span").remove()
would change the original DOM nodes.
Using the HTML DOM, I would like to select almost all td tags except for those td tags that have a class-attribute of "xyz".
With document.selectElementsByTagname["td"] I can get all the td-elements. However, I don't want all but only those where the class-attribute != "xyz".
Since there are no predicates in html DOM, I currently don't see a way to achieve this. Is there still a way to do it?
You can use querySelectorAll with :not() pseudo class selector.
document.querySelectorAll("td:not(.xyz)")
Array.from(document.querySelectorAll("td:not(.xyz)")).forEach(function(e) {
e.style.color = "red";
})
<table>
<tr>
<td class="xyz">a</td>
<td class="xyz">a</td>
<td>a</td>
<td class="xyz">a</td>
<td>a</td>
<td class="xyz">a</td>
</tr>
</table>
You do like this:
document.querySelector("td:not(.xyz)")
I'm trying to hide a row in a table if it does not contain a search value.
This works:
<table class="mytable">
<tr>
<td>1001</td>
<td>apples</td>
</tr>
<tr>
<td>1002</td>
<td>bananas</td>
</tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>
This will work by hiding all rows, then showing the ones we want:
$('#mybutton').click(function(){
$('.mytable td').parent().hide();
$('.mytable td:contains("apples")').parent().show();
});
But I've seen there's a more elegant (and probably efficient) solution using :not selector, but I can't get it working:
$('#mybutton2').click(function(){
$('.mytable td:not(:contains("apples"))').parent().hide();
});
How can I get this working using the :not selector, so that if a row does not contain apples, it will be hidden, leaving all the rows that contain apples.
JS Fiddle: https://jsfiddle.net/ryy3tvob/
Because first td not contains apple in any row and it will select all first td so it will hide it's parent. So you need to use :contains() for tr
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected. ( Taken from https://api.jquery.com/contains-selector/ )
$('#mybutton2').click(function() {
$('.mytable tr:not(:contains("apples"))').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
<tr>
<td>1001</td>
<td>apples</td>
</tr>
<tr>
<td>1002</td>
<td>bananas</td>
</tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>
So what I'm trying to do is get the last row of an HTML table. If this row then has a certain class I will ignore this row and select the previous one. This would then be cycled through from the end of the table until a row was found without this certain class.
I figured it's probably involving a for loop, a check for the row class and then JQuery's row.prev method, but still not quite sure how to approach this.
Thanks in advance!
To get the last table row that doesn't have a certain class, say targetClass, you can do this:
$("tr:not(.targetClass):last");
I'm not sure what you want to do with this table row, but if you were to add targetClass to the last row that didn't have it, it would look like this
$("tr:not(.targetClass):last").addClass("targetClass");
Check out this fiddle to see it in action
This example shows you how to get the last of each table on the current page: http://jsfiddle.net/JBnzK/
$('table').find('tr:last').each(function(){
if ($(this).hasClass('stupid')) {
$(this).css('color', 'red');
} else {
$(this).css('color', 'green');
}
});
Assuming you've got the following HTML:
<table id="mytable">
<tbody>
<tr>
<td>1</td>
</tr>
<tr id="YouFoundMe">
<td>1</td>
</tr>
<tr class="certainclass">
<td>1</td>
</tr>
<tr class="certainclass">
<td>1</td>
</tr>
<tr class="certainclass">
<td>1</td>
</tr>
</tbody>
</table>
You can do this:
var elWithoutClass = $('#mytable tr:not(.certainclass):last');
if (elWithoutClass.length) {
alert(elWithoutClass.get(0).id);
// alerts "YouFoundMe"
}
:not(.certainclass) will eliminate <tr> without class 'certainclass'
:last will get you the last one
I invite you to check the Selectors documentation page of jquery to learn more about them.