Solved

Trying to highlight an HTML column when it is clicked, want to affect all cells in column except the one that's being clicked.

Posted on 2008-10-27
15
260 Views
Last Modified: 2012-05-05
I'm trying to create something where when the user clicks on a cell in a table, the column highlights with the exception of the cell being clicked.

Any ideas how to work with the code here to make that happen?  I think I need to do something in this part:
      // and finally, add the class 'on' to the selected td
      var newtds = getElementsByClassName(column, 'td', table);
      for (var i=0; i<newtds.length; i++) {
            addClassName(newtds[i], 'on');
      }

But not sure what.  Any and all help much appreciated.

Thanks,

Mark
<script type="text/javascript">
/*
	For functions getElementsByClassName, addClassName, and removeClassName
	Copyright Robert Nyman, http://www.robertnyman.com
	Free to use if this text is included
*/
function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}
 
function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
    }
    return elm.className;
}
 
function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}
 
function activateThisColumn(column) {
	var table = document.getElementById('metrics');
	
	// first, remove the 'on' class from all other th's
	var ths = table.getElementsByTagName('th');
	for (var g=0; g<ths.length; g++) {
		removeClassName(ths[g], 'on');
	}
	// then, remove the 'on' class from all other td's
	var tds = table.getElementsByTagName('td');
	for (var m=0; m<tds.length; m++) {
		removeClassName(tds[m], 'on');
	}
	
	// now, add the class 'on' to the selected th
	var newths = getElementsByClassName(column, 'th', table);
	for (var h=0; h<newths.length; h++) {
		addClassName(newths[h], 'on');
	}
	// and finally, add the class 'on' to the selected td
	var newtds = getElementsByClassName(column, 'td', table);
	for (var i=0; i<newtds.length; i++) {
		addClassName(newtds[i], 'on');
	}
}
</script>
 
 
...
...
 
 
HTML:
 
...
<td class="col2" onclick="activateThisColumn('col2');return false;"><%=rs.Fields(3).Value%></td>
<td class="col3" onclick="activateThisColumn('col3');return false;"><%=rs.Fields(4).Value%></td>
<td class="col4" onclick="activateThisColumn('col4');return false;"><%=rs.Fields(5).Value%></td>
...
<td class="col4" onclick="activateThisColumn('col58');return false;"><%=rs.Fields(57).Value%></td>

Open in new window

0
Comment
Question by:cmgtech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
15 Comments
 

Author Comment

by:cmgtech
ID: 22817261
BTW, the <TD>'s are in a loop:

for each record in recordset:
<tr>...
<td class="col2" onclick="activateThisColumn('col2');return false;"><%=rs.Fields(3).Value%></td>
<td class="col3" onclick="activateThisColumn('col3');return false;"><%=rs.Fields(4).Value%></td>
<td class="col4" onclick="activateThisColumn('col4');return false;"><%=rs.Fields(5).Value%></td>
...
<td class="col4" onclick="activateThisColumn('col58');return false;"><%=rs.Fields(57).Value%></td>
</tr>
next
0
 
LVL 82

Expert Comment

by:hielo
ID: 22817268
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function init(){
	var t = document.getElementById("theTable");
	var td = t.getElementsByTagName("td");
	
	for( var i=0, limit = td.length; i < limit; ++i)
	{
		td[i].onclick=highlight;
	}
} 
function highlight(){
	var color="#ffff00";
	var d = this.parentNode;
	for( var i =0; i < d.cells.length; ++i)
		if( d.cells[i] == this )
			break;
	var p  = d.parentNode;
	for( var k=0; k < p.rows.length; ++k)
	{
		for( var l=0; l < p.rows[0].cells.length; ++l)
		{
			if( i != l)
				p.rows[k].cells[l].style.backgroundColor='';
			else
				p.rows[k].cells[l].style.backgroundColor=color;
		}
	}
	this.style.backgroundColor='';
}
window.onload=init;
</script>
</head>
<body>
<table id="theTable" border="1">
	<tr><td>a</td><td>b</td><td>c</td></tr>
	<tr><td>a</td><td>b</td><td>c</td></tr>
	<tr><td>a</td><td>b</td><td>c</td></tr>
	<tr><td>a</td><td>b</td><td>c</td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:cmgtech
ID: 22817457
Thanks, that looks like it gets close, but it is only highlighting the <th> at the top, nothing else, none of the <td>.

Not sure if this makes a difference, but I also have a onClick event on the <tr>'s.  Ultimately what I'm trying to do is to create a crosshair if you click anywhere in a matrix.  

Thanks,

Mark
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 82

Expert Comment

by:hielo
ID: 22817481
I don't know what markup you are sending to the browser, but what I posted works. Save it as test.html and try it.

OK, then move that function call to the end of function highlight()
0
 
LVL 82

Expert Comment

by:hielo
ID: 22817881
the updated example takes th into consideration. Also, it call a function at the end to compensate for your:

>>Not sure if this makes a difference, but I also have a onClick event on the <tr>'s.

it receives the current row, in case you need it on that other function
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function init(){
        var t = document.getElementById("theTable");
        var td = t.getElementsByTagName("td");
        for( var i=0, limit = td.length; i < limit; ++i)
        {
                td[i].onclick=highlight;
        }
        var td = t.getElementsByTagName("th");
        for( var i=0, limit = td.length; i < limit; ++i)
        {
                td[i].onclick=highlight;
        }
} 
function highlight(){
        var color="#ffff00";
        var d = this.parentNode;
        for( var i =0; i < d.cells.length; ++i)
                if( d.cells[i] == this )
                        break;
        var p  = d.parentNode;
        for( var k=0; k < p.rows.length; ++k)
        {
                for( var l=0; l < p.rows[0].cells.length; ++l)
                {
                        if( i != l)
                                p.rows[k].cells[l].style.backgroundColor='';
                        else
                                p.rows[k].cells[l].style.backgroundColor=color;
                }
        }
        this.style.backgroundColor='';
rowFunction(this.parentNode);
}
 
 
//r is the current row
function rowFunction(r){
	alert(r.innerHTML);
}
window.onload=init;
</script>
</head>
<body>
<table id="theTable" border="1">
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:cmgtech
ID: 22817981
"I get an error rows[...].cells[...].style is null or not an object"

the top of this table has colspans.  would that be an issue?
0
 

Author Comment

by:cmgtech
ID: 22817983
there are 3 rows of colspans that could be ignored.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22817986
>>the top of this table has colspans. would that be an issue?
Yes, because that means some rows have fewer <td> than others. It would be nice if you posted your table markup.
0
 

Author Comment

by:cmgtech
ID: 22818072
here it is.  thanks for looking.
<table id="metrics">
<tr><td colspan="16" class="pageheader"></td></tr>
<tr><td colspan="16"></td></tr>
<tr>
<td bgcolor="#00ff00">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Added since June<td></td><tr/><tr>
<td bgcolor="#000000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Held since June<td></td><tr/><tr>
<td bgcolor="#ff0000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>Dropped since June<td></td><tr/></table>
<tr class="table_header">
<th colspan="3" halign="left" halign="top"></th>
<th colspan="2" bgcolor="#c3c5a2">Treasury Management</th>
<th colspan="2" bgcolor="#c3c5a2">Credit</th>
<th colspan="1" bgcolor="#c3c5a2">Trust</th>
<th colspan="1" bgcolor="#c3c5a2">Trade Services</th>
<th colspan="5" bgcolor="#c3c5a2">Other</th>
<th colspan="2"></th>
</tr>
<tr class="table_header">
<th class="metaheader col1"></th>
<th class="metaheader col2"></th>
<th class="metaheader col3"></th>
<th class="metaheader col4"></th>
<th class="metaheader col5"></th>
<th class="metaheader col6"></th>
<th class="mainHeader col7"></th>
<th class="mainHeader col8"></th>
<th class="mainHeader col9"></th>
<th class="mainHeader col10"></th>
<th class="mainHeader col11"><</th>
<th class="mainHeader col12"></th>
<th class="mainHeader col13"></th>
<th class="mainHeader col14"></th>
<th class="mainHeader col15"></th>
<th class="mainHeader col16"></th>
</tr>
<tr bgcolor=#ffffff class="classname">
<td class="col1">A & I PRODUCTS ET AL</td>
<td class="col2">2</td>
<td class="col3">2</td>
<td class="col4">0</td>
<td class="col5">0</td>
<td class="col6">0</td>
<td class="col7" ></td>
<td class="col8" ></td>
<td class="col9" ></td>
<td class="col10" ></td>
<td class="col11" ></td>
<td class="col12" ></td>
<td class="col13" ></td>
<td class="col14" ></td>
<td class="col15" ></td>
<td class="col16" >;</td>
</tr>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22818153
but your markup is all wrong (I think). You seem to have two tables but you do not have the opening tag for the second table.
0
 

Author Comment

by:cmgtech
ID: 22818151
Sorry, this is the code, that stuff is all mangled for some reason.

thanks,

Mark
<html>
<table id="metrics" border=1>
<tr><td colspan="16" class="pageheader">aaa</td></tr>
<tr><td colspan="16">
<table>
<tr><td bgcolor="#00ff00">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
<tr><td bgcolor="#000000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
<tr><td bgcolor="#ff0000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
</table></td></tr>
<tr class="table_header">
<th colspan="3" halign="left" halign="top">a</th>
<th colspan="2" bgcolor="#c3c5a2">a</th>
<th colspan="2" bgcolor="#c3c5a2">a</th>
<th colspan="1" bgcolor="#c3c5a2">a</th>
<th colspan="1" bgcolor="#c3c5a2">a</th>
<th colspan="5" bgcolor="#c3c5a2">a</th>
<th colspan="2">aaa</th>
</tr>
<tr class="table_header">
<th class="metaheader col1">a</th>
<th class="metaheader col2">a</th>
<th class="metaheader col3">a</th>
<th class="metaheader col4">a</th>
<th class="metaheader col5">a</th>
<th class="metaheader col6">a</th>
<th class="mainHeader col7">a</th>
<th class="mainHeader col8">a</th>
<th class="mainHeader col9">a</th>
<th class="mainHeader col10">a</th>
<th class="mainHeader col11">a</th>
<th class="mainHeader col12">a</th>
<th class="mainHeader col13">a</th>
<th class="mainHeader col14">a</th>
<th class="mainHeader col15">a</th>
<th class="mainHeader col16">a</th>
</tr>
<tr bgcolor=#ffffff class="classname">
<td class="col1">a</td>
<td class="col2">2</td>
<td class="col3">2</td>
<td class="col4">0</td>
<td class="col5">0</td>
<td class="col6">0</td>
<td class="col7" >a</td>
<td class="col8" >a</td>
<td class="col9" >a</td>
<td class="col10" >a</td>
<td class="col11" >a</td>
<td class="col12" >a</td>
<td class="col13" >a</td>
<td class="col14" >a</td>
<td class="col15" >a</td>
<td class="col16" >a</td>
</tr>
</table>
</html>

Open in new window

0
 

Author Comment

by:cmgtech
ID: 22818164
The inner table can be dealt with in another way if it's a problem.

Thanks,

Mark
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22818898

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
 
<html>
<head>
<script type="text/javascript">
function init(){
	var t = document.getElementById("metrics");
	var td = t.rows[3].getElementsByTagName("th");
 
	for( var j=3; j < t.rows.length; ++j)
	{
		for( var i=0, limit = t.rows[j].cells.length; i < limit; ++i)
		{
			t.rows[j].cells[i].onclick=highlight;
		}
	}
 
} 
function highlight(){
        var color="#ffff00";
        var d = this.parentNode;
        for( var i =0; i < d.cells.length; ++i)
                if( d.cells[i] === this )
                        break;
 
        var p  = d.parentNode;
        for( var k=3; k < p.rows.length; ++k)
        {
                for( var l=0; l < p.rows[k].cells.length; ++l)
                {
                        if( i != l)
                                p.rows[k].cells[l].style.backgroundColor='';
                        else
                                p.rows[k].cells[l].style.backgroundColor=color;
                }
        }
        this.style.backgroundColor='';
rowFunction(this.parentNode);
}
 
 
//r is the current row
function rowFunction(r){
	//alert(r.innerHTML);
}
window.onload=init;
</script>
 
</head>
<body>
<table id="metrics" border=1>
	<tr><td colspan="16" class="pageheader">aaa</td></tr>
	<tr><td colspan="16">
		<table>
			<tr><td bgcolor="#00ff00">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
			<tr><td bgcolor="#000000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
			<tr><td bgcolor="#ff0000">&nbsp;&nbsp;&nbsp;&nbsp;</td><td>a</td><tr/>
		</table>
		</td>
	</tr>
	<tr class="table_header">
		<th colspan="3" halign="left" halign="top">a</th>
		<th colspan="2" bgcolor="#c3c5a2">a</th>
		<th colspan="2" bgcolor="#c3c5a2">a</th>
		<th colspan="1" bgcolor="#c3c5a2">a</th>
		<th colspan="1" bgcolor="#c3c5a2">a</th>
		<th colspan="5" bgcolor="#c3c5a2">a</th>
		<th colspan="2">aaa</th>
	</tr>
	<tr class="table_header">
		<th class="metaheader col1">a</th>
		<th class="metaheader col2">a</th>
		<th class="metaheader col3">a</th>
		<th class="metaheader col4">a</th>
		<th class="metaheader col5">a</th>
		<th class="metaheader col6">a</th>
		<th class="mainHeader col7">a</th>
		<th class="mainHeader col8">a</th>
		<th class="mainHeader col9">a</th>
		<th class="mainHeader col10">a</th>
		<th class="mainHeader col11">a</th>
		<th class="mainHeader col12">a</th>
		<th class="mainHeader col13">a</th>
		<th class="mainHeader col14">a</th>
		<th class="mainHeader col15">a</th>
		<th class="mainHeader col16">a</th>
	</tr>
	<tr bgcolor='#ffffff' class="classname">
		<td class="col1">a</td>
		<td class="col2">2</td>
		<td class="col3">2</td>
		<td class="col4">0</td>
		<td class="col5">0</td>
		<td class="col6">0</td>
		<td class="col7" >a</td>
		<td class="col8" >a</td>
		<td class="col9" >a</td>
		<td class="col10" >a</td>
		<td class="col11" >a</td>
		<td class="col12" >a</td>
		<td class="col13" >a</td>
		<td class="col14" >a</td>
		<td class="col15" >a</td>
		<td class="col16" >a</td>
	</tr>
	<tr bgcolor='#ffffff' class="classname">
		<td class="col1">a</td>
		<td class="col2">2</td>
		<td class="col3">2</td>
		<td class="col4">0</td>
		<td class="col5">0</td>
		<td class="col6">0</td>
		<td class="col7" >a</td>
		<td class="col8" >a</td>
		<td class="col9" >a</td>
		<td class="col10" >a</td>
		<td class="col11" >a</td>
		<td class="col12" >a</td>
		<td class="col13" >a</td>
		<td class="col14" >a</td>
		<td class="col15" >a</td>
		<td class="col16" >a</td>
	</tr>
	<tr bgcolor='#ffffff' class="classname">
		<td class="col1">a</td>
		<td class="col2">2</td>
		<td class="col3">2</td>
		<td class="col4">0</td>
		<td class="col5">0</td>
		<td class="col6">0</td>
		<td class="col7" >a</td>
		<td class="col8" >a</td>
		<td class="col9" >a</td>
		<td class="col10" >a</td>
		<td class="col11" >a</td>
		<td class="col12" >a</td>
		<td class="col13" >a</td>
		<td class="col14" >a</td>
		<td class="col15" >a</td>
		<td class="col16" >a</td>
	</tr>
	<tr bgcolor='#ffffff' class="classname">
		<td class="col1">a</td>
		<td class="col2">2</td>
		<td class="col3">2</td>
		<td class="col4">0</td>
		<td class="col5">0</td>
		<td class="col6">0</td>
		<td class="col7" >a</td>
		<td class="col8" >a</td>
		<td class="col9" >a</td>
		<td class="col10" >a</td>
		<td class="col11" >a</td>
		<td class="col12" >a</td>
		<td class="col13" >a</td>
		<td class="col14" >a</td>
		<td class="col15" >a</td>
		<td class="col16" >a</td>
	</tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:cmgtech
ID: 22825177
Works in Firefox 3 but not IE6.  It's gotta work on IE6 or I can't use it.  Sorry this is taking so long.  I think the problem has been solved and a new problem has arisen.

Check this question:  http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23855478.html
0
 

Author Closing Comment

by:cmgtech
ID: 31510538
Didn't work in IE6, my problem not theirs.
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

717 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