[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dynamic table mouseover help

Posted on 2011-10-26
13
Medium Priority
?
393 Views
Last Modified: 2013-12-25
I am creating a table from an external file with this code
 
function displayData2(response)  
    {  
    var xmlEl2 = response.getElementsByTagName("Client");
    var table = document.createElement("table");
    //var objTbl = document.getElementById('table');
	table.border = "0";
	table.width="90%";
	table.height="20%";
	table.backgroundColor = "#FFFFFFF";
	table.overflow="SCROLL";
	table.align="CENTER";
	var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl2[0].childNodes.length; colHead++) {
        if (xmlEl2[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl2[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#FFFFFF";
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl2.length; i++) {
        var row = document.createElement("tr");
        // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl2[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
			var lookitup = document.createTextNode(xmlEl2[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#FFFFFF";
             }
            cellID='R'+[i]+'C'+[j];
            td.setAttribute("id",cellID);
			td.align="left";
            td.height="20%";
            td.overflow="SCROLL";
            td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
            td.style.fontweight = "BOLD";
            td.onclick=function(){gogetit(document.getElementById(this.id).innerHTML);};
			td.appendChild(lookitup);
            row.appendChild(td);
			       }
            tbody.appendChild(row);
		    }
	document.getElementById('account').style.display='none'
	document.getElementById("lookitup").innerHTML="";
    document.getElementById("lookitup").appendChild(table);
	document.getElementById('lookitup').style.display='block';   //shows it
	}

Open in new window


I would like to add a rollover function to highlight the row the user is moused over.  

Is there an easy way to do this?
0
Comment
Question by:Charlietn
  • 7
  • 6
13 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37032439
in the loop right where the row is created:
var row = document.createElement("tr");
rowID='R'+i;
row.id=rowID;
row.onmouseover=function(){hightlite(documentgetElementById(this.id).id);};
row.onmouseover=function(){unhightlite(documentgetElementById(this.id).id);};
//and continue with your code
 // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
etc...

Open in new window


Very similar to the way we did the td

The hilite function should set whatever highlighting you want and the unhilight should set it back to normal presentation.  Probably the easiest way is to create two class in the stylesheet and just change the class names in the functions.

0
 

Author Comment

by:Charlietn
ID: 37033095
I will work on the function (should be able to figure that out) and let you know.

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37033278
The functions are easy.

In your stylesheet you declare 2 classes:
.hilite {color:white;background-color:blue}
.nohilite {color:black;background-color:white}  // or whatever you have for the original rendering

Open in new window


then the functions are one-liners:

function hightlite(x) { document.getElementById(x).className='hilite'; }
function unhightlite(x) { document.getElementById(x).className='nohilite'; }

Open in new window


0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Charlietn
ID: 37037750
It works, almost perfectly.  This line makes the table have every other row alternate colors to make it more readable..  
 
// td.style.backgroundColor = "#FFFFFF";

Open in new window


If I do not comment it out the backgroung color  only changes on every other row but the text color changes on every row.  

Can this be addressed?

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37038346
Actually there are two lines doing that the other one is
tableHead.style.backgroundColor = "#FFFFFF";

Open in new window

Leave the one you commented out that and change this one to
tableHead.className="nohilite";

Open in new window


I think that should do it.  the rows were being style at the tag level and that takes priority over the class.  If that does not completely solve it try commenting it out and see where that gets us.
0
 

Author Comment

by:Charlietn
ID: 37038699
Nah, didn't work.   Not a do or die, just want to understand this for future use.

This is the entire piece of code you helped with.
function displayData2(response)  
    {  
    var xmlEl2 = response.getElementsByTagName("Client");
    var table = document.createElement("table");
 	table.border = "0";
	table.width="90%";
	table.height="20%";
	table.backgroundColor = "#FFFFFFF";
	table.overflow="SCROLL";
	table.align="CENTER";
	var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl2[0].childNodes.length; colHead++) {
        if (xmlEl2[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl2[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#FFFFFF";
		tableHead.className="nohilite"; 
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl2.length; i++) {
        var row = document.createElement("tr");
		rowID='R'+[i];
        row.id=rowID;
        row.onmouseover=function(){hightlite(document.getElementById(this.id).id);};
        row.onmouseout=function(){unhightlite(document.getElementById(this.id).id);};
 // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl2[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
			var lookitup = document.createTextNode(xmlEl2[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#FFFFFF";
	         }
            cellID='R'+[i]+'C'+[j];
            td.setAttribute("id",cellID);
			td.align="left";
            td.height="20%";
            td.overflow="SCROLL";
            td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
            td.style.fontweight = "BOLD";
			//td.onmouseover=function(){hightlite(document.getElementById(this.id).id);};
            //td.onmouseout=function(){unhightlite(document.getElementById(this.id).id);};
           	td.onclick=function(){gogetit(document.getElementById(this.id).innerHTML);};
			td.appendChild(lookitup);
            row.appendChild(td);
			       }
            tbody.appendChild(row);
		    }
	document.getElementById('account').style.display='none'
	document.getElementById("lookitup").innerHTML="";
    document.getElementById("lookitup").appendChild(table);
	document.getElementById('lookitup').style.display='block';   //shows it
	}

Open in new window


It produces a table with every other row white.
This is a screen shot of that with a gray row, first one highlighted.  The text changes to blue and the background changes to yellow

gray row

This is a screen shot of that with a white row, second  one highlighted.  The text changes to blue and the background stays the same.
white

If you see something simple please let me know.

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37038877
Two lines are causing the problem.  One that needs to be changed and one that needs to be added.  I put a comment on the lines you need to fix.

function displayData2(response)  
    {  
    var xmlEl2 = response.getElementsByTagName("Client");
    var table = document.createElement("table");
 	table.border = "0";
	table.width="90%";
	table.height="20%";
	table.backgroundColor = "#FFFFFFF";
	table.overflow="SCROLL";
	table.align="CENTER";
	var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl2[0].childNodes.length; colHead++) {
        if (xmlEl2[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl2[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#FFFFFF";					
		tableHead.className="nohilite"; 							
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl2.length; i++) {
        var row = document.createElement("tr");
		rowID='R'+[i];
        row.id=rowID;
		row.className="nohilite";                                  // here add this line
        row.onmouseover=function(){hightlite(document.getElementById(this.id).id);};
        row.onmouseout=function(){unhightlite(document.getElementById(this.id).id);};
 // Create the row/td elements
        for (j = 0; j < xmlEl2[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl2[i].childNodes[j].nodeType != 1) {
                continue;
            }

            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
			var lookitup = document.createTextNode(xmlEl2[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
                td.style.backgroundColor = "#FFFFFF";				// change this to td.className="nohilite"
	         }
            cellID='R'+[i]+'C'+[j];
            td.setAttribute("id",cellID);
			td.align="left";
            td.height="20%";
            td.overflow="SCROLL";
            td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
            td.style.fontweight = "BOLD";
			//td.onmouseover=function(){hightlite(document.getElementById(this.id).id);};
            //td.onmouseout=function(){unhightlite(document.getElementById(this.id).id);};
           	td.onclick=function(){gogetit(document.getElementById(this.id).innerHTML);};
			td.appendChild(lookitup);
            row.appendChild(td);
			       }
            tbody.appendChild(row);
		    }
	document.getElementById('account').style.display='none'
	document.getElementById("lookitup").innerHTML="";
    document.getElementById("lookitup").appendChild(table);
	document.getElementById('lookitup').style.display='block';   //shows it
	}

Open in new window


Let me know how that works out.
0
 

Author Comment

by:Charlietn
ID: 37039390
I already had done that following your directions from earlier.  It works to highlight each row but eliminates the alternate row shading.  That is what I wanted to preserve.

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37042162
Where is the grey being set? I don't see it in the script.  Is it in a stylesheet?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 37042180
My thinking is that you should not use the background color to highlight;  it will be a continuing source of problems because instead of just a toggle you now have three possible states.  You might be best to just use the text color for the highlight.
0
 

Author Closing Comment

by:Charlietn
ID: 37044701
Thank you very much for your attention to this question.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37045174
Iam always glad to help when a questioner is active in working on the problem and helping me help them.  Some people come to EE and think all they need to do is post a little  information and come back the next day to get the answer.  The site works best, when there is collaboration like we had here.
0
 

Author Comment

by:Charlietn
ID: 37045269
Thank you Sir.   The site provides an invaluable service.  The least anyone seeking help can do is to try and provide enough information to not waste the expert's time.  

Once again, thank you for your help.

Charlie

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses
Course of the Month18 days, 1 hour left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question