<table>
<tr>
<td class = "nowrap cr" id="cr1">123123</td>
<td class = "nowrap ch" id="ch1">123123</td>
</tr>
<tr>
<td class = "nowrap cr" id="cr2">123123</td>
<td class = "nowrap ch" id="ch2">123123</td>
</tr>
<tr>
<td class = "nowrap cr" id="cr3">467574</td>
<td class = "nowrap ch" id="ch3">123123</td>
</tr>
</table>
How do I set the font-weight: bold in tr where chID == crID
I have written JS code as below
$(function () {
for (var i = 0; i < 20; i++)
{
if ($('#cr' + i).val() == $('#ch' + i).val())
{
$('#cr' + i).parent().css('font-weight', 'bold');
}
}
});
But it's not working.
Let me know how should I achieve desired output?
val() is for input elements only. You need to use
if($('#cr'+i).html() == $('#ch'+i).html())
or, to compare the textual value only (which is probably what you want)
if($('#cr'+i).text() == $('#ch'+i).text())
Related
I want to make X and O game , So the first function i did it has loop and condition that when i click on any cell(td) in the table and if all cells in the table are empty wrote X in the cell which I clicked it , but I have here 2 problem ,
First one The console wrote (Sample1.html:53 Uncaught SyntaxError: Unexpected token '<') it refers to for loop, so I don't know what is the problem there.
the second problem console wrote also that my function name is not define , although the function name is correct so can anyone help me.
the JS codes is
<script >
/*var lastGame;*/
var TR=0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked){
for(var x=0, x < table.rows.length; x++){
if(!table.rows[x])
{
TR++;
}
else{}
}
if(TR==9)
{
document.getElementById(idClicked).innerHTML="X";
}
else {}
}
</script>
And the HTML :
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id);"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>
There seems to be other problems with your code, but your two specific problems should be fixed. Also I don't see why you need to check if every cell is empty, but then again I can't see the rest of your code. Feel free to ask any questions in the comments.
var TR = 0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked) {
for (var x = 0; x < table.rows.length; x++) {
if (!(table.rows[x].value == "")) {
TR++;
console.log(TR);
}
}
if (TR == 3) {
document.getElementById(idClicked).innerHTML = "X";
}
}
CheckAllEmpty('td1');
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id)"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>
I just want make so it the tr hides when the td does not follow the requirements, tried with jQuery and JavaScript, don't know what's wrong.
$(document).ready(function(){
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide;
}
else {
$(this).hide;
}
});
});
You can do this.
Hope this will help you.
$(document).ready(function() {
var value4 = 2;
var value5 = 4;
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide();
} else {
$(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td price_search="3">10</td>
<td price_search="2">20</td>
<td price_search="3">30</td>
</tr>
</table>
I am going to go out on a limb here and make broad assumptions on content not in the question.
Your .hide; is invalid syntax
You are missing value for two variables value4 and value4 which frankly are not well named variables at all. I will make an assumption that those are better named and that they come from somewhere during the page rendering.
I make an assumption that you have something you want to filter/hide by those upper/lower price points.
I make the assumption the attribute might contain values that need to be parsed (not a number as they are)
var lowerPricePoint = .45;
var upperPricePoint = 5.25;
$(function() {
$("td").filter('[price_search]').each(function() {
// parse out a price from perhaps formatted values
let price = Number.parseFloat($(this).attr("price_search").replace(/\$|,/g, ''));
// toggle visibility of the row
$(this).closest('tr').toggle(price > lowerPricePoint && price < upperPricePoint);
});
});
td {
border: solid black 1px;
padding: 0.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr>
<td>Wear it</td>
<td price_search="123.13">Shoes</td>
</tr>
<tr>
<td>Drive it</td>
<td price_search="$23,123.13">Car</td>
</tr>
<tr>
<td>Drink it</td>
<td price_search="3.13">Beet Juice</td>
</tr>
<tr>
<td>Eat it</td>
<td price_search="12.13">Can of expensive corn</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="35">Radish</td>
</tr>
<tr>
<td>Use it</td>
<td price_search="1.45">Paper towel</td>
</tr>
<tr>
<td>Plain</td>
<td price_search="$1.87">Butter</td>
</tr>
<tr>
<td>Herb</td>
<td price_search="$2.45">Butter</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="15">Gum</td>
</tr>
</table>
I want to hide a table if its "td" empty.
I'm trying to use this function, but it's not working:
function isEmptyTable(){
var tdTable = document.getElementsByName('tdTable').textContent;
var table = document.getElementsByName('tableToday');
if(tdTable == "")
table.style.display = 'none';
}
Any tips?
HTML:
<body onload="isEmptyTable()">
<table name="tableToday">
<thead>
<tr>
<th>Prêmio</th>
<th>Resultado</th>
<th>Grupo</th>
</tr>
</thead>
<tbody>
<tr>
<th>1º</th>
<td name="tdTable">oi</td>
<td name="tdTable"></td>
</tr>
</tbody>
</table>
I'd use the getElementById and the getElementsByClassName selectors to achieve this:
function isEmptyTable(myId){
let tds = document.getElementsByClassName(myId);
let hide = false
for (let element of tds) {
if (element.innerHTML.length == 0) hide = true
}
let myTable = document.getElementById(myId);
if (hide) myTable.style.display = 'none';
}
isEmptyTable("myTable")
isEmptyTable("myTable2")
td {
border: 1px solid red;
}
<table id="myTable">
<tr>
<td class="myTable"></td>
<td class="myTable">
lololo
</td>
</tr>
</table>
<table id="myTable2">
<tr>
<td class="myTable2">asdasd</td>
<td class="myTable2">
lololo
</td>
</tr>
</table>
in your code just change these two lines. because the td will return in collection so use array index [0]
function isEmptyTable(){
var tdTable = document.getElementsByName('tdTable')[0].textContent;
var table = document.getElementsByName('tableToday')[0];
if(tdTable == "")
table.style.display = 'none';
}
it will work fine.
The problem is in the part:
var tdTable = document.getElementsByName('tdTable').textContent;
and
table.style.display = 'none';
Because the function document.getElementsByName() doesn't return a simple variable , it's return an array , so to solve the problem you have to change the part:
var tdTable = document.getElementsByName('tdTable').textContent;
to
var tdTable = document.getElementsByName('tdTable')[0].textContent;
and change table.style.display = 'none'; to table[0].style.display = 'none';
For more information about document.getElementsByName() Click here
I am learning Javascript, in a school assignment we have to by using a loop count how many games was made in 2014.
It does not return anything in the console, where have I gone wrong?
var allGames = document.getElementsByTagName('td');
var array = Array.prototype.slice.call(allGames, 0)
var games14 = 0;
for (var i = 0; i < array.length; ++i) {
if (array[i] == 2014) {
games14++;
console.log(games14)
}
}
<table id="games">
<thead>
<tr>
<th>Titel</th>
<th>Genre</th>
<th>Årstal</th>
</tr>
</thead>
<tbody id="games_tbody">
<tr class="horror">
<td class="title">Outlast</td>
<td>Horror</td>
<td>2013</td>
</tr>
<tr class="rpg">
<td class="title">Dragon Age: Inquisition</td>
<td>Role-playing Game</td>
<td>2014</td>
</tr>
<tr class="rpg">
<td class="title">Skyrim</td>
<td>Role-playing Game</td>
<td>2011</td>
</tr>
<tr class="horror">
<td class="title">Amnesia: The Dark Descent</td>
<td>Horror</td>
<td>2010</td>
</tr>
<tr class="simulator">
<td class="title">Scania Truck Driving Simulator</td>
<td>Simulator</td>
<td>2012</td>
</tr>
<tr class="horror">
<td class="title">Five Nights at Freddy’s</td>
<td>Horror</td>
<td>2014</td>
</tr>
<tr class="simulator">
<td class="title">Sims 4</td>
<td>Simulator</td>
<td>2014</td>
</tr>
<tr class="rts" id="last">
<td class="title">Warcraft III: Reign of Chaos</td>
<td>Real-time Strategy</td>
<td>2002</td>
</tr>
</tbody>
</table>
You need to check for its text:
var allGames = document.getElementsByTagName('td');
...
if (array[i].innerHTML == '2014') {
OR,
if(array[i].innerText == '2014' || array[i].textContent == '2014'){
No need to do Loop through elements in a HTML table.. You can simply use regular expressions to count all occurrences within the games_tbody:
var games14 = document
.getElementById('games_tbody')
.innerText
.match(/2014/g)
.length;
console.log('Games made in 2014:', games14);
<table id="games">
<thead>
<tr><th>Titel</th><th>Genre</th><th>Årstal</th></tr>
</thead>
<tbody id="games_tbody">
<tr class="horror"><td class="title">Outlast</td><td>Horror</td><td>2013</td></tr>
<tr class="rpg"><td class="title">Dragon Age: Inquisition</td><td>Role-playing Game</td><td>2014</td></tr>
<tr class="rpg"><td class="title">Skyrim</td><td>Role-playing Game</td><td>2011</td></tr>
<tr class="horror"><td class="title">Amnesia: The Dark Descent</td><td>Horror</td><td>2010</td></tr>
<tr class="simulator"><td class="title">Scania Truck Driving Simulator</td><td>Simulator</td><td>2012</td></tr>
<tr class="horror"><td class="title">Five Nights at Freddy’s</td><td>Horror</td><td>2014</td></tr>
<tr class="simulator"><td class="title">Sims 4</td><td>Simulator</td><td>2014</td></tr>
<tr class="rts" id="last"><td class="title">Warcraft III: Reign of Chaos</td><td>Real-time Strategy</td><td>2002</td></tr>
</tbody>
</table>
array[i] == 2014
Everything in the array will be an HTML Table Data Cell Element object.
Nothing in the array will be the Number 2014.
You need to read the text content from the element and then compare that.
I think this is a better way.
var table = document.getElementById("games");
count = 0;
for (let i = 0; row = table.rows[i]; i++) {
if (row.cells[2].innerHTML === "2014"){
count++;
}
/*
for (let j = 0; col = row.cells[j]; j++) {
if (col.innerHTML === "2014"){
count++;
}
}
*/
}
console.log(count);
The commented code is for checking every item on a single row.
I am trying to use javascript to remove all table rows lower than the value from an input.
You can try out the code here http://liveweave.com/1RwU1D
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(e.innerHTML < document.getElementById("filterValue").value) {
e.parentNode.style.display="none";
}
}
}
This is the table.
<input id="filterValue" type="text" onkeyup="filter();">
<table>
<tr>
<td class="name">test</td>
<td class="value">10</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">20</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">30</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">40</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">50</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">60</td>
</tr>
</table>
When I type the number 3 into the input, it already removes the first two rows even though this should happen at 30.
If I change the script to this it doesnt happen.
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(e.innerHTML < 3) {
e.parentNode.style.display="none";
}
}
I feel stupid for asking, but can somebody tell me what the problem is.
Sorry if my English is hard to understand, it's my third language.
Edit: Thanks for the quick answers, i had a feeling it was somethong like that.
You should be using parseInt to convert the string values to int, otherwise a text comparison will take place.
Change your filter function like this:
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML, 10) < parseInt(document.getElementById("filterValue").value,10) ) {
e.parentNode.style.display="none";
}
}
}
Your comparison is using string comparison rules, I believe.
Wrap parseInt() around the values that need to be treated as a integers.
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML) < parseInt(document.getElementById("filterValue").value)) {
e.parentNode.style.display="none";
}
}
}
try this
HTML
<input id="filterValue" type="text" onkeyup="filter();">
<table>
<tr>
<td class="name">test</td>
<td class="value">10</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">20</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">30</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">40</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">50</td>
</tr>
<tr>
<td class="name">test</td>
<td class="value">60</td>
</tr>
</table>
Javascript
function filter() {
var elements = document.getElementsByClassName("value");
for(i = 0; i < elements.length; i++) {
e = elements[i];
e.parentNode.style.display="table-row";
if(parseInt(e.innerHTML) < parseInt(document.getElementById("filterValue").value)) {
e.parentNode.style.display="none";
}
}
}