cmgtech
asked on
Trying to highlight an HTML column when it is clicked, want to affect all cells in column except the one that's being clicked.
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(col
for (var i=0; i<newtds.length; i++) {
addClassName(newtds[i], 'on');
}
But not sure what. Any and all help much appreciated.
Thanks,
Mark
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(col
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>
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>
ASKER
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
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
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()
OK, then move that function call to the end of function highlight()
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
>>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>
ASKER
"I get an error rows[...].cells[...].style
the top of this table has colspans. would that be an issue?
the top of this table has colspans. would that be an issue?
ASKER
there are 3 rows of colspans that could be ignored.
>>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.
Yes, because that means some rows have fewer <td> than others. It would be nice if you posted your table markup.
ASKER
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"> </td><td>Added since June<td></td><tr/><tr>
<td bgcolor="#000000"> </td><td>Held since June<td></td><tr/><tr>
<td bgcolor="#ff0000"> </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>
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.
ASKER
Sorry, this is the code, that stuff is all mangled for some reason.
thanks,
Mark
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"> </td><td>a</td><tr/>
<tr><td bgcolor="#000000"> </td><td>a</td><tr/>
<tr><td bgcolor="#ff0000"> </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>
ASKER
The inner table can be dealt with in another way if it's a problem.
Thanks,
Mark
Thanks,
Mark
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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: https://www.experts-exchange.com/questions/23855478/Javascript-Column-Highlight-not-working-in-IE6.html
Check this question: https://www.experts-exchange.com/questions/23855478/Javascript-Column-Highlight-not-working-in-IE6.html
ASKER
Didn't work in IE6, my problem not theirs.
ASKER
for each record in recordset:
<tr>...
<td class="col2" onclick="activateThisColum
<td class="col3" onclick="activateThisColum
<td class="col4" onclick="activateThisColum
...
<td class="col4" onclick="activateThisColum
</tr>
next