Table Highlighting On Click

1,208 Expert 1GB

This is one way to make it possible to highlight rows and cols in a table with an intersecting color

Expand|Select|Wrap|Line Numbers

 
<script>

/* Javascript written by iam_clint */

vertColor="#66ffcc";

horzColor="#b7efff";

intersectColor="#aa22f0";
 
function vertClick(col, tbl) {

    var color="";

    var blnColSpan = false;

    var table = document.getElementById(tbl);

    var entireRow=table.getElementsByTagName("tr");

    for (i=0; i<entireRow.length; i++) {

        curEle = entireRow[i].getElementsByTagName("td")[col];

        for (b=0; b<entireRow[i].getElementsByTagName("td").length; b++) { 

            colspan = entireRow[i].getElementsByTagName("td")[b].getAttribute("colspan");

            if (colspan!=null && colspan!=1) { blnColSpan = true; }

        }

        if (!blnColSpan) { 

            if (typeof(curEle)=="object") {

                if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }

                if (curEle.getAttribute("horz")=="true" && curEle.getAttribute("vert")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="false" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=horzColor; } else { curEle.style.backgroundColor=color; }

            }

        }

        blnColSpan = false;

    }

}
 
function horzClick(row, tbl) {

    var color="";

    var table = document.getElementById(tbl);

    var entireRow=table.getElementsByTagName("tr")[row-1];

    var tds = entireRow.getElementsByTagName("td");

    for (i=1; i<tds.length; i++) {

        curEle = tds[i];

        if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }

        if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="false") {  curEle.style.backgroundColor = vertColor; } else { curEle.style.backgroundColor = color;  }

    }

}

</script>

<STYLE>

tr { cursor: pointer; }

table { border-collapse: collapse; width: 100%; height: 100%;}

</STYLE>

<table border=1>

<tbody id="example">

<tr><td  onclick="horzClick('1', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('2', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('3', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('4', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('5', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('6', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('7', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('8', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('9', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('10', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('11', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('12', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('13', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('14', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6

<tr><td  onclick="horzClick('15', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
 
</tbody>

</table>

Sep 18 '07 #1

Subscribe Post Reply

4731

ronverdonk

4,258

Expert 4TB

Good show!

Ronald

Sep 20 '07 #2

Romulo NF

Another way of doing it

file: js

Expand|Select|Wrap|Line Numbers

 
window.onload = function() {

tableOne = new hightlightTable("myTable")

}
 
function hightlightTable(tableId) {

this.table = document.getElementById(tableId)

this.rows = this.table.tBodies[0].getElementsByTagName("tr")

this.cells = this.table.tBodies[0].getElementsByTagName("td")
 
    for (x=0; x<this.cells.length; x++) {

    this.cells[x].hightlight = this

    this.cells[x].onclick = function() { this.hightlight.selectCell(this) }

    }

}
 
hightlightTable.prototype.selectCell = function(cell) {

this.cellIndex = cell.cellIndex

this.rowIndex = cell.parentNode.rowIndex-1
 
    for (x=0; x<this.rows.length; x++) {        

        for (y=0; y<this.rows[x].cells.length; y++) {

        this.rows[x].cells[y].className = ""

            if (x == this.rowIndex) {

            this.rows[x].cells[y].className = "cross"

            }

        }

        this.rows[x].cells[this.cellIndex].className = "cross"

    }
 
cell.className = "intersection"

}

file: css

Expand|Select|Wrap|Line Numbers

 
table {width:760px; border-collapse:collapse; table-layout:fixed; font:normal 11px arial; border:1px solid #aaa;}

table th {background:#40478E; color:#fff;}

table td {border:1px solid #ddd; text-indent:5px; cursor:pointer}

table tr.hover td {background:#E0F1F8}
 
.cross {background:#D0EAD6}

.intersection {background:#347443; color:#fff; font-weight:bold}

file: html
[HTML]
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dummy 1A</td>
<td>Dummy 2A</td>
<td>Dummy 3A</td>
<td>Dummy 4A</td>
<td>Dummy 5A</td>
<td>Dummy 6A</td>
<td>Dummy 7A</td>
<td>Dummy 8A</td>
<td>Dummy 9A</td>
</tr>
<tr>
<td>Dummy 1B</td>
<td>Dummy 2B</td>
<td>Dummy 3B</td>
<td>Dummy 4B</td>
<td>Dummy 5B</td>
<td>Dummy 6B</td>
<td>Dummy 7B</td>
<td>Dummy 8B</td>
<td>Dummy 9B</td>
</tr>
<tr>
<td>Dummy 1C</td>
<td>Dummy 2C</td>
<td>Dummy 3C</td>
<td>Dummy 4C</td>
<td>Dummy 5C</td>
<td>Dummy 6C</td>
<td>Dummy 7C</td>
<td>Dummy 8C</td>
<td>Dummy 9C</td>
</tr>
<tr>
<td>Dummy 1D</td>
<td>Dummy 2D</td>
<td>Dummy 3D</td>
<td>Dummy 4D</td>
<td>Dummy 5D</td>
<td>Dummy 6D</td>
<td>Dummy 7D</td>
<td>Dummy 8D</td>
<td>Dummy 9D</td>
</tr>
<tr>
<td>Dummy 1E</td>
<td>Dummy 2E</td>
<td>Dummy 3E</td>
<td>Dummy 4E</td>
<td>Dummy 5E</td>
<td>Dummy 6E</td>
<td>Dummy 7E</td>
<td>Dummy 8E</td>
<td>Dummy 9E</td>
</tr>
<tr>
<td>Dummy 1F</td>
<td>Dummy 2F</td>
<td>Dummy 3F</td>
<td>Dummy 4F</td>
<td>Dummy 5F</td>
<td>Dummy 6F</td>
<td>Dummy 7F</td>
<td>Dummy 8F</td>
<td>Dummy 9F</td>
</tr>
<tr>
<td>Dummy 1G</td>
<td>Dummy 2G</td>
<td>Dummy 3G</td>
<td>Dummy 4G</td>
<td>Dummy 5G</td>
<td>Dummy 6G</td>
<td>Dummy 7G</td>
<td>Dummy 8G</td>
<td>Dummy 9G</td>
</tr>
<tr>
<td>Dummy 1H</td>
<td>Dummy 2H</td>
<td>Dummy 3H</td>
<td>Dummy 4H</td>
<td>Dummy 5H</td>
<td>Dummy 6H</td>
<td>Dummy 7H</td>
<td>Dummy 8H</td>
<td>Dummy 9H</td>
</tr>
<tr>
<td>Dummy 1I</td>
<td>Dummy 2I</td>
<td>Dummy 3I</td>
<td>Dummy 4I</td>
<td>Dummy 5I</td>
<td>Dummy 6I</td>
<td>Dummy 7I</td>
<td>Dummy 8I</td>
<td>Dummy 9I</td>
</tr>
</tbody>
</table>
[/HTML]

Nov 28 '07 #3

acoder

16,027

Expert Mod 8TB

Another way of doing it

Nice and unobtrusive.

Nov 30 '07 #4

acoder

16,027

Expert Mod 8TB

This is one way to make it possible to highlight rows and cols in a table with an intersecting color

The td and tr tags aren't closed, so the table may not display properly.

Nov 30 '07 #5

Similar topics

Alter table weird bug?

by: Jon Combe | last post by:

I have created the following test SQL code to illustrate a real problem I have with some SQL code. CREATE TABLE JCTable ( CustomerName varchar(50) ) ALTER TABLE JCTable ADD CustomerNo int...

Microsoft SQL Server

Highlighting Table Cells with JS - Firefox vs. IE

by: lance | last post by:

Hi, I am a JS newbie. Hopefully the answer to my question is not trivial. I have written a simple webpage that presents a table. A JS function allows the viewer to click on a cell and each...

Javascript

Simple table row highlighting - on mouseover

by: Jeremy | last post by:

Can anyone point me to where I might find a simple example of coding to achieve the effect of a table row changing colour as the mouse moves over it? Presume the same effect may be possible for an...

HTML / CSS

Keep Memo field from highlighting text when click in field?

by: Shyguy | last post by:

Is there any way to stop Access from highlighting all the text in a memo box? If I click again the text is no longer highlighted, but I would like to get it to not highlight at all. Thanks for...

Microsoft Access / VBA

C-style Syntax Highlighting Tutorial

by: Bob hotmail.com> | last post by:

Everyone I have been spending weeks looking on the web for a good tutorial on how to use regular expressions and other methods to satisfy my craving for learning how to do FAST c-style syntax...

C# / C Sharp

Stopping text from highlighting in textbox

by: > Adrian | last post by:

Is there a way of stopping text from highlighting in textbox? Many thanks, Adrian.

C# / C Sharp

Prevent highlighting of a drop down menu?

by: thetechgeek | last post by:

Hey all, I've created a pretty nice-looking drop-down menu, and I need to prevent users form highlighting the text in the menu item, because it looks kind of ugly. Here's an snippet of my menu...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing