I'm trying to change the style of a <span> by changing its class. I'm evaluating its text value and want it to change the className to 'red' if it's less than 97.7, or to 'green' if it's anything else. I'm evaluating all <span> of class "qadata".
function changeColor() {
var cells = document.getElementsByTagName('span').getElementsByClassName('qadata');
for (var i=0, len=cells.length; i<len; i++) {
if (parseFloat(cells[i].innerHTML) < 97.7){
cells[i].className = 'red';
}
else {
cells[i].className = 'green';
}
}
}
I'm trying to do this in the following HTML table:
<table datasrc='#QA' class="qa">
<thead>
<tr>
<th>Period</th>
<th>Safety</th>
<th>Quality</th>
<th>Shipping</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftcolumn"><span datafld='Period' width=100%></span></td>
<td><span datafld='Safety' width=100% class="safety"></span></td>
<td><span datafld='Quality' width=100% class="qadata"></span></td>
<td><span datafld='Shipping' width=100% class="qadata"></span></td>
</tr>
</tbody>
</table>
The data is populated using another function prior to calling changeColor(). This is a corporate intranet site, so I'm currently stuck using ie8 or ie10. JavaScript is preferable to jQuery in this instance.
I've been doing HTML and CSS for years, but never got into JavaScript until recently. I tried searching but haven't found a method posted here that works.
I created a jsfiddle that seems to work. I just used the:
document.querySelectorAll('span.qadata')
It changes the class names for the spans with class qadata. http://jsfiddle.net/mYUjL/
Related
I'm working on a calculator and have a mousedown and mouseup function on every id. Is there some way to clean that up and have a function called anytime a class element is clicked and be able to get the id that's been clicked inside the function?
here's a link to a myfiddle calculator
also, I noticed that when I placed my javascript directly in the JS box it didn't work, however as a script embedded in the html it works fine. Could someone explain why?
<tr>
<td class='noborder' colspan='1' rowspan='2'> </td>
<td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
<td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
<td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
<td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
<td class='noborder' colspan='1' rowspan='2'> </td>
</tr>
<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}
function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>
I realized a way how to add mousedown and mouseup events on all the elements with a class:
var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
elements[i].onmousedown = function() {
mouseDown(this.id);
mouseUp(this.id);
}
}
I tested it on w3schools.com.
(Also, I don't know what you mean by JS Box. Sorry.)
It might be because you have an id conflict on the page. Using IDs like "1" is not recommended for this reason; better to be more specific.
In fact, there is no need to query the element by its ID anyway. You can operate directly on the element by just passing it into the handler. E.g.
<td class='buttons' onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" >1</td>
<script>
function mouseDown(element) {
element.style.backgroundColor = "gray";
}
function mouseUp(element) {
element.style.backgroundColor = "white";
}
</script>
EDIT: As #bgaury mentioned, a CSS active pseudo class is a far better option for this use case however.
Remove the script tag, and add this to your css style:
.buttons:active {
background-color: gray;
}
For calculations use something like this:
<script>
var table = document.getElementsByTagName("table")[0]
table.addEventListener("click",clicked);
function clicked(el){
if (el.hasClass("buttons")){
//magic
}
}
</script>
I have a html table,which i am populating using java script. the table has 10 cells.i want to make the table as a carousel so that first 5 cells are shown and then user can move to next 5 cells. I have tried looking on the internet,but all my search leads to plugins. i dont wana use plugin,as i am learning javascript.
My table code is shown below:
<div>
<table id="daily_forecast">
<tr id="time">
<td id="time0">
<td id="time1">
<td id="time2">
<td id="time3">
<td id="time4">
<td id="time5">
<td id="time6">
<td id="time7">
<td id="time8">
<td id="time9">
</tr>
<tr id="temp">
<td id="temp0">
<td id="temp1">
<td id="temp2">
<td id="temp3">
<td id="temp4">
<td id="temp5">
<td id="temp6">
<td id="temp7">
<td id="temp8">
<td id="temp9">
</tr>
</table>
and javascript wjich populates is
function populateTable(disp_forecast){
var tbl=document.getElementById("daily_forecast");
tbl.style.width = '900px';
tbl.style.height='200px';
tbl.style.position="relative";
tbl.style.left='60px';
tbl.style.top='40px';
tbl.style.border = '1px solid grey';
elemrow1Id="time";
elemrow2id="temp";
elemrow1Id_day="day"
var key4,key5,key6="";
for(var i=0;i<10;i++){
key4=elemrow1Id.concat(i);
key5=elemrow2id.concat(i);
key6=elemrow1Id_day.concat(i);
var day_time=disp_forecast[key4];
var day_temp=disp_forecast[key5];
if(day_time==0){
var day=disp_forecast[key6];
day=day.toString();
day=day.concat('\n');
day=day.concat("12am");
document.getElementById(key4).innerHTML=day;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time>12){
day_time=day_time-12;
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time==12){
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else{
day_time=day_time.toString();
day_time=day_time.concat("am");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
document.getElementById(key5).innerHTML=day_temp;
}
}
Please provide me some resource for making this table as a carousel or some solution.
This might at least get you started (I'm assuming horizontal movement). Typically a carousel is a div inside a div, with the outer div acting as a viewport/window, revealing only the desired parts of the inner div. You then scoot the inner div in response to some buttons or key presses.
CSS
.outerWrap, .innerWrap {
position: relative;
}
.outerWrap {
overflow: hidden;
}
HTML
<div class="outerWrap">
<div class="innerWrap">
<table> <!-- your stuff goes here --> </table>
</div>
</div>
Javascript
var elem = document.getElementsByTagNames('innerWrap')[0];
elem.style.left = "15px";
elem.style.left = "15px" is just an example of shifting the inner div to the right a little. You'll want to create a loop or something that moves it incrementally, probably in response to buttons, event listeners, etc...
I am currently developing a Chrome extension for my university and I have done most of the things I want to do but I am having difficulty with one thing is that whenever I try to select the first <table> tag which is the navbar in this link I can't seem to hide it and then add my custom navbar using CSS.
Here is my code (I have included random createtextnode that I want to add to give a sense for what I want do or I am trying to do):
CSS
table:nth-child(1)
{
display:none;
}
JavaScript
var note = document.getElementsByName('stud_login')[0];
var par = document.createElement("div");
var tag = document.createElement("a");
var t1 = document.createTextNode(" Hello! Please try to refresh page again if the verification is not filled properly.");
var t2 = document.createTextNode("Click here");
var t3 = document.createTextNode(" Any suggestions? ");
var br = document.createElement("br");
par.setAttribute("class", "info-msg");
par.appendChild(t1);
tag.setAttribute("href", "http://goo.gl/forms/QI8gPMfKML");
tag.setAttribute("target", "_blank");
tag.setAttribute("id", "rahultag");
par.appendChild(t3);
tag.appendChild(t2);
par.appendChild(tag);
note.parentElement.appendChild(par);
Here is the HTML code i want to target and is the first table that occurs:
<table width="100%" height="15%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/banner_bg3.jpg">
<tr>
<td width="25%" align=left>
<img src="images/vit_logo6.jpg" height="76" width="297">
</td>
<td align=center>
<br>
<font size=5 color=#FFFFFF face="Comic Sans MS">
<b>V-TOP</b><br>Student Login
</font>
</td>
</tr>
</table>
To target the first table, then this would likely give you the desired result
var note = document.getElementsByTagName('table')[0];
If the table is not the first element in its parent, you need to use insertBefore instead of appendChild
note.parentElement.insertBefore(par, note);
Side note:
If the table:nth-child(1) { display: none; } won't work, you could use replaceChild to replace the table with your new element
note.parentElement.replaceChild(par, note);
or simply remove it
note.parentElement.removeChild(note);
Note though, that if you are to remove it, do that after you inserted the new, or else there will be no reference where to insert the new.
If you still need to remove before add, read more here how to get the element to be removed's next sibling: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
I have a Print button in my Project. I am using JavaScript to print the data. I have a variable as data_to_print which contains the HTML which is to be print. The problem is that when i hit the print button the print dialog window of windows does not open. I am not able to find whats the problem, can any one help me.
Below is my Code:
function print_all()
{
var xx='<html>
<head>
<style>...</style>
</head>
<body>
<center>
<div>
<table><thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
<th>DOB</th>
</tr><thead>
<tr>
<td>1</td>
<td>John</td>
<td>Mumbai</td>
<td>15 August</td>
</tr>
<tr>
<td>2</td>
<td>John2</td>
<td>Mumbai2</td>
<td>18 August</td>
</tr>
</table>
</div>
</center>
</body>
<html>';
var content_vlue = xx;
content_vlue=content_vlue.replace("[Print]", "");
var docprint=window.open("","","");
docprint.document.open();
docprint.document.write('<html><head>');
docprint.document.write('<style> .table{border-collapse:collapse;}.table tr
th{border:1px solid #000!important;color:#000;}.table tr th
a{color:#000!important;}.table tr td{border:1px solid #000!important;}</style>');
docprint.document.write('</head><body><center>');
docprint.document.write('<div align="left">');
docprint.document.write(content_vlue);
docprint.document.write('</div>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
The reason for your trouble is quit simple. You forgot to add the method .print();.
When I understand your right, then do following:
function print_all()
{
...
docprint.document.close();
docprint.focus();
//This line was missing
doc.print();
}
Addationaly two advices:
First:
As steo wrote, if you want to print long string in Javascript, concatinate it with the plus sign. The browsers don't accept line breaks within strings.
Second:
When I used your definition for the link <a title="Print" onClick="print_all();" class="no-bord btnlite" target="_blank">print</a> it did open the opener page also in a new tab. Another effect ourccur when I opend the site in IE. The effect: he didn't marked this line as clickable link.
To solve these, use this line <a title="Print" href="#" onClick="print_all();return false;" class="no-bord btnlite" target="_blank">print</a> .
I've got to add a new row with it's content populated from an ajax query when I click on any row present. Everything is working well in ie8, ff3.6, opera11, but in chrome10 and safari5 the row are always shown as the first row even if the HTML code is well ordered.
the javascript use is here:
jQuery('.tx_tacticinfocours_pi1_cour_line').click(function (){
if(running==false){
running=true;
jQuery('.cour_detail_temp_inner').slideUp(500, function () {
jQuery(this).parents('.cour_detail_temp').remove();
});
var td=jQuery(this).after('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>');
td=td.next().find('.cour_detail_temp_inner');
var url=jQuery(this).find('.tx_tacticinfocours_pi1_detail_link a').attr('href');
td.load(url,function(){
jQuery(this).slideDown(500,function(){running=false;});
});
}
});
and here is the HTML (it's typo3 template):
<table class="tx_tacticinfocours_pi1_liste" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>###TITRE_WEB###</th>
<th>###TITRE_PDF###</th>
<th>###TITRE_DETAILS###</th>
<th>###TITRE_SIGLE###</th>
<th>###TITRE_TITRE###</th>
<th>###TITRE_ENLIGNE###</th>
<th>###TITRE_ENSEIGNANT###</th>
<th>###TITRE_RESPONSABLE###</th>
</tr>
<!-- ###COURS### begin -->
<tr class="tx_tacticinfocours_pi1_cour_line">
<td class="tx_tacticinfocours_pi1_link"><!-- ###COURS_LINK### begin -->###COURS_WEB_IMAGE###<!-- ###COURS_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_link"><!-- ###PDF_LINK### begin -->###PDF_IMAGE###<!-- ###PDF_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_link tx_tacticinfocours_pi1_detail_link"><!-- ###DETAILS_LINK### begin -->###DETAILS_IMAGE###<!-- ###DETAILS_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_sigle" nowrap>###COURS_SIGLE###</td>
<td class="tx_tacticinfocours_pi1_titre">###COURS_TITRE###</td>
<td class="tx_tacticinfocours_pi1_enligne">###COURS_ENLIGNE###</td>
<td class="tx_tacticinfocours_pi1_enseignant" nowrap>###COURS_ENSEIGNANT###</td>
<td class="tx_tacticinfocours_pi1_responsable" nowrap>###COURS_RESPONSABLE###</td>
</tr>
<!-- ###COURS### end -->
have you got any idea why it's doing so or any work around?
I'm not sure, but try turning:
var td=jQuery(this).after(...)
to: var td=jQuery('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>').appendTo(this);
I think what you've got there is more of a css problem than a javascript problem.
I stumbled upon this today. Turns out the "main rows" in my table had display:block, which makes the new ones that have display:table-row end up on top even if they're mingled in the HTML. Having display:table-row on the "main rows" leaves the inserted ones in place. Go figure! (Safari only)
Not sure this is the problem, but instead of:
var td=jQuery(this).after(...)
try this:
var td=jQuery(this).parent().after(...)