I dont know if it is possible to do but i this is my code.
function start(blauw){
document.getElementById(blauw).style.background="white";
}
<table>
<tr>
<td id= niks></td>
<td id= niks></td>
<td id= blauw onclick="start(id)">1</td>
<td id= blauw onclick="start(id)">2</td>
<td id= blauw>3</td>
<td id= blauw>4</td>
<td id= blauw>5</td>
<td id= blauw>6</td>
<td id= blauw>7</td>
<td id= blauw>8</td>
<td id= niks></td>
<td id= niks></td>
</tr>
</table>
i want to achieve that if i click on it the background will turn into white so people now what they are booking. but do i have to give everything an own ID? because right now if i click on "2" only "1" turns white and "2" won't turn white.
(excuse me for my bad english)
Instead of passing attributes just pass the element itselfe:
function start(element) {
element.style.background = "green";
}
<table>
<tr>
<td class=niks></td>
<td class=niks></td>
<td class=blauw onclick="start(this)">1</td>
<td class=blauw onclick="start(this)">2</td>
<td class=blauw>3</td>
<td class=blauw>4</td>
<td class=blauw>5</td>
<td class=blauw>6</td>
<td class=blauw>7</td>
<td class=blauw>8</td>
<td class=niks></td>
<td class=niks></td>
</tr>
</table>
And as mentioned in the comments - ID`s had to be unique!!
EDIT:
Altered function to switch the background color.
function start(element) {
var backgroundColor = element.style.background;
if (backgroundColor === "green") {
element.style.background = "red";
} else {
element.style.background = "green";
}
}
So this is a very simple demo
See FIDDLE
Related
I am using google table charts,value where the data is like :
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
So the table value keeps on incrementing, that means, tr and td keeps increasing based on test executions and number of testcases.
So What I like to make a change is if the td value is Pass, the background colour should be green and if its fail, it should be red.
i tried like
var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;
for (key in table1) {
if(key != "Pass"){
key.bgColor='#800000';
}
};
But no luck !!
How its possible. Please help.
So as a caveat to doing it via the javascript way, you're already adding a style tag to each cell that will re-eval and paint each independently as you're say for example adding new rows etc that would also involve firing off that method each time.
Another option to consider is a css selector that doesn't need to be refired, and will handle the issue while not adding a new style tag to each cell which becomes something like an added attribute of data-whatever="<value>" vs style="background-color: <colorThatWillBeConvertedToRGBAutomatically>" to each cell.
So just a no js option;
// Nope.
[data-tag=Pass] {
background-color: green;
}
[data-tag=Fail] {
background-color: red;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td" data-tag="TC-206">TC-206</td>
<td class="google-visualization-table-td" data-tag="Customer logs in">Customer logs in</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td" data-tag="TC-207">TC-207</td>
<td class="google-visualization-table-td" data-tag="Customer signs out">Customer signs out</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
</table>
You are not using the right for loop.
Take a look at this documentation (MDN).
Also, using element.value will return the value of the attribute value, not the text content.
The following code should do the trick.
var elements = document.getElementsByClassName('google-visualization-table-td');
for (var i = 0; i < elements.length; i++) {
var value = elements[i].innerText || elements[i].textContent;
if (value === 'Fail') {
elements[i].style.backgroundColor = '#FF0000';
} else if (value === 'Pass') {
elements[i].style.backgroundColor = '#00FF00';
}
}
td {
display: block;
border: solid 1px #CCC;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>
You can add a listener if user can add or remove items in the table or if yourself manage table you can just add this code to your managing functions like adding or removing:-
var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
if(x[i].innerText === 'Pass')
x[i].style.backgroundColor = "green";
else if(x[i].innerText === 'Fail')
x[i].style.backgroundColor = "red";
}
.forEach your HTMLTable.rows
.forEach your HTMLRow.cells
Get each cell content cell.textContent.trim().toLowerCase()
If the content is either pass|fail add a is-[pass|fail] classname
[...document.getElementById("google-visualization").rows].forEach( row =>
[...row.cells].forEach( cell => {
const cont = cell.textContent.trim().toLowerCase();
if (/^(pass|fail)$/.test(cont)) {
cell.classList.add(`is-${cont}`);
}
})
);
.is-pass{background: green;}
.is-fail{background: red;}
<table id="google-visualization">
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>
Clearly the best way would be to assign a class fail or pass at elements creation and style using CSS, instead of using JS loops.
I have the following HTML Table,
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="totalone">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount"><div id="discountid"><input type="text" name="disco" class="dis"/></div> </td>
</tr>
<tr class="tax_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">tax</td>
<td class="total-value" id="tax"><div id="tax">00</div></td>
</tr>
</table>
When i click on the button with id Discount, I need to change the value to the TD inside the div Tag with id "total" and set its value to another JavaScript variable?I tried the following, but it's not working.
$(".discountbtn").click(function(){
var test=$("#items #disc .dis").val(); //Easiest method
console.log("lol");
console.log(test);
var tot = roundNumber(test,2);
var new_tot=window.finale-tot;
console.log(window.finale);
console.log(new_tot);
$('#items #totalone').html("$"+new_tot);
//alert("button");
});
Try with my code that help you
change HTML <div id="totalone">$875.00</div> to $<span id="totalone">875.00</span>
$(document).ready(function() {
$("#discountbtn").click(function(){
var test=$("#items #disc .dis").val();
console.log(test);
var oldTotal = $("#totalone").text();
console.log(oldTotal);
var tot = Math.round(test * 100) / 100;
var new_tot=parseFloat(oldTotal)-tot;
console.log(new_tot);
$('#items #total').html(new_tot); //It was a jQuery selector glitch.
});
});
$('#items #totalone').html("$"+new_tot);
I have a table with a variety of dynamically generated background colors. I'd like to use jQuery to populate the table cell contents with the cell's actual background color. I can use $("td").text("new contents"); to change the contents of the cells. I tried $("td").text($(this).css("backgroundColor")); to put the background color into the cell, but the background color doesn't come through.
$("td").text(
$(this).css("backgroundColor")
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>lighten</td>
<td style="background-color: #d379a6;">10%</td>
<td style="background-color: white;">50%</td>
<td style="background-color: white;">100%</td>
</tr>
<tr>
<td>darken</td>
<td style="background-color: #ad3972;">10%</td>
<td style="background-color: #14060d;">50%</td>
<td style="background-color: black;">100%</td>
</tr>
<tr>
<td>mix</td>
<td style="background-color: #b24a7e;">10%</td>
<td style="background-color: #632946;">50%</td>
<td style="background-color: black;">100%</td>
</tr>
</table>
Try this instead:
$("td").text(function() {
return $(this).css("backgroundColor");
});
.text method can take a function as argument. In this case this function must return value to be used as new text content for elements in collection.
Your version $("td").text($(this).css("backgroundColor")); is incorrect because in this case this points to global object (which is window object) and obviously $(this).css("backgroundColor") returns nothing.
$("td").text(function() {
return $(this).css("backgroundColor");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>lighten</td>
<td style="background-color: #d379a6;">10%</td>
<td style="background-color: white;">50%</td>
<td style="background-color: white;">100%</td>
</tr>
<tr>
<td>darken</td>
<td style="background-color: #ad3972;">10%</td>
<td style="background-color: #14060d;">50%</td>
<td style="background-color: black;">100%</td>
</tr>
<tr>
<td>mix</td>
<td style="background-color: #b24a7e;">10%</td>
<td style="background-color: #632946;">50%</td>
<td style="background-color: black;">100%</td>
</tr>
</table>
The accepted answer solved the problem I was having, but I also wanted the colors to be displayed in hex, which isn't what was returned by jQuery. So I ported in a solution for that from Can I force jQuery.css("backgroundColor") returns on hexadecimal format?. This is the final jQuery I ended up implementing:
$("td").text(function() {
color = $(this).css("backgroundColor");
bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
});
Ok so i have this html structure jsfiddle and what I want do is grab all 8 surrounding tds when one is clicked.
So for example if the user clicks on #c3 then I want an array of the ['b2', 'b3', 'b4', 'c2', 'c4', 'd2', 'd3', 'd4'] but if they select #a2 since it doesnt have 8 surrounding corners it would return ['a1', 'a3', 'b1', 'b2', 'b3']
This is the direction I was going with but I think this will get pretty complicated ...any better ideas or is this the best way
function surrounding_table_rows(id){
var table_rows = new Array();
var letters = new Array("a","b","c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o");
var letter = id[0];
var number = id[1];
var index = letters.indexOf(letter);
if (index == 0) {
// need to add this logic here
}else{
var prior_letter = letters[index - 1];
var after_letter = letters[index + 1];
if (number == 0) {
// need to add this logic here
}else if(number == 14){
// need to add this logic here
}else{
table_rows.push("#"+letter+(parseInt(number)-1));
table_rows.push("#"+letter+(parseInt(number)+1));
table_rows.push("#"+prior_letter+(parseInt(number)-1));
table_rows.push("#"+prior_letter+(number));
table_rows.push("#"+prior_letter+(parseInt(number)+1));
table_rows.push("#"+after_letter+(parseInt(number)-1));
table_rows.push("#"+after_letter+(number));
table_rows.push("#"+after_letter+(parseInt(number)+1));
}
}
return table_rows;
}
my javascript function does work on middle
surrounding_table_rows("d4")
["#d3", "#d5", "#c3", "#c4", "#c5", "#e3", "#e4", "#e5"]
here is the html
<table class='config'>
<tr>
<td id='a1'></td>
<td id='a2'></td>
<td id='a3'></td>
<td id='a4'></td>
<td id='a5'></td>
<td id='a6'></td>
<td id='a7'></td>
<td id='a8'></td>
<td id='a9'></td>
<td id='a10'></td>
<td id='a11'></td>
<td id='a12'></td>
<td id='a13'></td>
<td id='a14'></td>
<td id='a15'></td>
</tr>
<tr>
<td id='b1'></td>
<td id='b2'></td>
<td id='b3'></td>
<td id='b4'></td>
<td id='b5'></td>
<td id='b6'></td>
<td id='b7'></td>
<td id='b8'></td>
<td id='b9'></td>
<td id='b10'></td>
<td id='b11'></td>
<td id='b12'></td>
<td id='b13'></td>
<td id='b14'></td>
<td id='b15'></td>
</tr>
<tr>
<td id='c1'></td>
<td id='c2'></td>
<td id='c3'></td>
<td id='c4'></td>
<td id='c5'></td>
<td id='c6'></td>
<td id='c7'></td>
<td id='c8'></td>
<td id='c9'></td>
<td id='c10'></td>
<td id='c11'></td>
<td id='c12'></td>
<td id='c13'></td>
<td id='c14'></td>
<td id='c15'></td>
</tr>
<tr>
<td id='d1'></td>
<td id='d2'></td>
<td id='d3'></td>
<td id='d4'></td>
<td id='d5'></td>
<td id='d6'></td>
<td id='d7'></td>
<td id='d8'></td>
<td id='d9'></td>
<td id='d10'></td>
<td id='d11'></td>
<td id='d12'></td>
<td id='d13'></td>
<td id='d14'></td>
<td id='d15'></td>
</tr>
<tr>
<td id='e1'></td>
<td id='e2'></td>
<td id='e3'></td>
<td id='e4'></td>
<td id='e5'></td>
<td id='e6'></td>
<td id='e7'></td>
<td id='e8'></td>
<td id='e9'></td>
<td id='e10'></td>
<td id='e11'></td>
<td id='e12'></td>
<td id='e13'></td>
<td id='e14'></td>
<td id='e15'></td>
</tr>
<tr>
<td id='f1'></td>
<td id='f2'></td>
<td id='f3'></td>
<td id='f4'></td>
<td id='f5'></td>
<td id='f6'></td>
<td id='f7'></td>
<td id='f8'></td>
<td id='f9'></td>
<td id='f10'></td>
<td id='f11'></td>
<td id='f12'></td>
<td id='f13'></td>
<td id='f14'></td>
<td id='f15'></td>
</tr>
Here is a rudimentary solution to your problem, using jQuery: http://jsfiddle.net/ujDsS/9/
$(function() {
$("td").css("cursor","pointer").click(function() {
$("td").css("background","white");
var $i, $j;
var cell = $(this), parentRow = cell.parent(), container = parentRow.parent();
var x = parentRow.children("td").index(cell), y = container.children("tr").index(parentRow);
var myID = cell.attr("id");
for ($i = -1; $i <= 1; $i++) {
if (y-$i < 0) continue;
var row = container.children("tr").eq(y-$i);
if (!row.length) continue;
for ($j = -1; $j <= 1; $j++) {
if (x-$j < 0) continue;
var cell2 = row.children("td").eq(x-$j);
if (!cell2.length) continue;
cell2.css("background","red");
}
}
});
});
What I am doing is pretty simple: on each click, I convert the cell into its x-y coordinates, and then loop through the 8 neighbors + itself and paint them red.
jQuery has an issue (it's a feature, really) where the indices of eq can be negative. Fixing this is left as an exercise - it's as simple as checking if y-$i is negative :-)
This assumes one thing: You will not use colspan or rowspan
When my page loads it calls the function like below:
<body onLoad='changeTDNodes()'>
And the code it calls is below:
enter code here
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
function changeTDNodes() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
}
I have the class setup correctly in CSS
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
But no classes are being changed, whats going on?
Thanks for all your help!
Below is whole page:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Livermore Readerboard</title>
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
$(function() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
</script>
<style type='text/css'>
#InnerRight {
width: 50% !important;
position: relative !important;
float: left !important;
}
#InnerLeft {
width: 49% !important;
position: relative !important;
float: right !important;
}
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
</style>
</head>
<body>
<div id='InnerLeft'>
<table border=1 cellpading=1 cellspacing=0>
<tr align=right>
<td align=left><b>Split/Skill</b></td>
<td align=center><B>CIQ</b></td>
<td align=center><b>EWT</b></td>
<td align=center><b>Agents Staffed</b></td>
<td align=center><b>Avail</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_video</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_tier</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_video</b></td>
<td align=center class='threshold'><B>60</b></td>
<td align=center><b>10:12</b></td>
<td align=center><b>58</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hsi</b></td>
<td align=center class='threshold'><B>34</b></td>
<td align=center><b>18:15</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hn</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>3:48</b></td>
<td align=center><b>3</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_cdv</b></td>
<td align=center class='threshold'><B>6</b></td>
<td align=center><b>14:53</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>CommOps FieldCare</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
</tr>
</table>
</div>
</body>
</html>
You would be far better off, if possible, using ids on your elements, and then using document.getElementById() (or, better yet, using Dojo, MooTools or JQuery to make your code simpler).
So your html looks like:
<td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>
Then your JavaScript looks like:
var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];
In JQuery (and others), you can easily use a class to determine which elements need thresholding
In this case, your html looks like:
<td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>
And your entire JavaScript looks like:
$(function() {
var threshValue = 10;
$('.threshold').each(function(index) {
var thisValue = parseFloat( $('b', this).text() );
if(thisValue > threshValue) {
$(this).addClass('overThreshold');
}
});
});
In your current example, there is an error in your CSS
To style td and th elements with a classname, go
td.overThreshold, th.overThreshold {
background: #F00; /* for example */
}
Presumably you are passing through something to the applyThresholds function where innerHTML on myvalue is not valid. Does it work ok in firefox etc?
My guess would be that the crazy document.getElementsByTagName('B')[36]; code is just returning undefined at some point. You should put some code in applyThresholds to check to see if you are getting invalid arguments through. Something like:
if(myvalue == null || mycell == null) {
return;
}