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
258 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 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