My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.
I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.
I am looking for some help on how to do this.
This is my current code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
I would recommend you add an id to your table so you can access it directly.
After that we get the array of tr. Also I can recommend here you validate that this array is of the same size than your results array. Just for good measure.
Then we can just iterate over this array using jQuery's each function.
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
})
.success { background:green; }
.danger { background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
Hope this helps :)
Something like this seems to work...
<table width="100%">
<tr><td>True</td></tr>
<tr><td>2</td><td style="display:none">0</td></tr>
<tr><td>3</td><td style="display:none">1</td></tr>
<tr><td>4</td><td style="display:none">0</td></tr>
<tr><td>5</td><td style="display:none">0</td></tr>
<tr><td>6</td><td style="display:none">1</td></tr>
<tr><td>7</td><td style="display:none">0</td></tr>
</table>
You can add an own property (e.g. data-boolean) to your cells.
//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]"));
//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
if(v.getAttribute("data-boolean") === "true"){
v.classList.add("success");
}
if(v.getAttribute("data-boolean") === "false"){
v.classList.add("danger");
}
});
.success {
background: green;
}
.danger {
background: red;
}
<table width="100%">
<tr>
<td data-boolean="true">True</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td data-boolean="false">False</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
Related
I want to get from the following html "only" the number 0 or the number 1 depending on which table row I click (FYI: there will be many rows with different numbers):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
This is how it looks visually:
This is how the html looks in console view:
This is my javascript function:
function setUnstakeNumber() {
let selection = document.getSelection();
let finalSelection = selection.anchorNode.data
let activeTextarea = document.activeElement;
let parent = document.documentElement.parentElement; // Returns the <html> element
console.log(selection);
console.log(finalSelection);
console.log(parent);
console.log(activeTextarea);
}
But none of the above works.
The closest one is the finalSelection, but I need to really click exactly on top of the number I want rather then anywhere in its row.
How do I get the number by clicking anywhere in its element?
So If I would click anywhere in the first row I would get the number 0 and if I would click anywhere in the second row I would get the number 1 with only Vanilla Javascript (No JQuery)?
Try this!
function setUnstakeNumber() {
let selection = document.getSelection();
// get selected row
let selectedRow = selection.anchorNode.parentNode.parentNode;
let index = selectedRow.childNodes[3].innerText;
console.log(index);
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
First get the selected row and then select the which includes the index.
I'm trying to change text color depending on the number value.
<?php
$secure_num = 8;
$price_num = 4;
<script>
function change_color_text (num1) {
var rate_num = num1;
if(rate_num >= 7) {
rate_num.style.color = "#008000"; // green
} else if (rate_num >= 4) {
rate_num.style.color = " #FFFF00"; // yellow
} else {
rate_num.style.color = " #FF0000"; // red
}
return rate_num;
}
</script>
<figure class="wp-block-table">
<table>
<thead>
<tr>
<th>Service Rate</th>
<th class="has-text-align-center" data-align="center">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Secure Rate</td>
<td class="has-text-align-center" data-align="center"><div class="Secure-Rate"><?php echo "<script> change_color_text($secure_num); </script>"?></div></td>
</tr>
<tr>
<td>Price Rate</td>
<td class="has-text-align-center" data-align="center"><div class="Price-Rate"><?php echo "<script> change_color_text($price_num); </script>"?></div></td>
</tr>
</tbody>
</table>
</figure>
?>
So what I'm trying to do is that if $secure_num is 8 then the number '8' (green color) should be echoed, and if $price_num is 4 then the the number '4' (red) should be echoed on the screen. I don't use html format 'cause I'm writing this code on the wordpress theme code(mostly php file).
This code will definitely give an error, "cannot read value of undefined"
This has to do with DOM manipulation.
In this code, JavaScript engine doesn't understand what element style color you're trying to change.
A way to fix this will be
const rate_num = document.querySelector(".class")
Where .class is the class name of whatever text you're trying to change in the HTML.
you can write this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script>
function change_color_text (num1) {
var rate_num = num1;
if(rate_num >= 7) {
document.getElementById('demo').innerHTML="green";
document.getElementById('demo').style.color="green";
} else if (rate_num >= 4) {
document.getElementById('demo').innerHTML="yellow"; // yellow
document.getElementById('demo').style.color="yellow";
} else {
document.getElementById('demo').innerHTML="red" // red;
document.getElementById('demo').style.color="red";
}
return rate_num;
}
</script>
</body>
</html>
<?php echo "<script> change_color_text(8) </script>"?>
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
there is a table:
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>dany</td>
<td>lucy</td>
<td>bob</td>
<td>apple</td>
</tr>
</table>
</body>
</html>
now I want select <td>lucy<td> and I want to select it with text
the td with text=lucy
how can I select it with js or jquery ?
If you wanna find a td that contains lucy
Try like this
var td = $("td:contains('lucy')");
If you wanna find a td that have exact text of lucy
Try like this
var td= $("td").filter(function() {
return $(this).text() == "lucy";
})
The following will select all td elements that has 'lucy' as their text.
$("table td").filter(function(){ return $(this).text() == "lucy" });
Try utilizing Array.prototype.filter() , document.querySelectorAll() , Node.textContent , strict equality operator
var td = [].filter.call(document.querySelectorAll("td"), function(el) {
return el.textContent === "lucy"
});
td[0].style.background = "olive";
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>dany</td>
<td>lucy</td>
<td>bob</td>
<td>apple</td>
</tr>
</table>
</body>
</html>
I have a table with names that correspond with their urls
I want to use the information in the table to create the urls that the page will go to if I click that row.
I'm using datatables http://www.datatables.net , if someone can point me to code or api for this that'd be great.
FULL CODE: ARTICLE DESCRIBES IT STEP BY STEP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Full Row Select Using jQuery</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.Highlight
{
background-color: #dcfac9;
cursor: pointer;
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="link-table">
<tr>
<td>http://www.yahoo.com/</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>http://www.microsoft.com/</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>http://imar.spaanjaars.com/</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script type="text/javascript">
$(function ()
{
// Hide the first cell for JavaScript enabled browsers.
$('#link-table td:first-child').hide();
// Apply a class on mouse over and remove it on mouse out.
$('#link-table tr').hover(function ()
{
$(this).toggleClass('Highlight');
});
// Assign a click handler that grabs the URL
// from the first cell and redirects the user.
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
</script>
</body>
</html>
Below are exmaples:
http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery
http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable