iam_clint 1,208
Recognized Expert Top Contributor
This is one way to make it possible to highlight rows and cols in a table with an intersecting color -
<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>
-
-
4 4755
Another way of doing it
file: js -
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 -
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]
acoder 16,027
Recognized Expert Moderator MVP
Another way of doing it
Nice and unobtrusive.
acoder 16,027
Recognized Expert Moderator MVP
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.
Sign in to post your reply or Sign up for a free account.
Similar topics |
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
INSERT INTO JCTable ( CustomerName , CustomerNo ) VALUES ( 'Jon Combe'
, 1 )
INSERT INTO JCTable ( CustomerName , CustomerNo ) VALUES ( 'Bill
Gates' , 1 )
UPDATE JCTable SET CustomerNo = 2 WHERE CustomerName = 'Jon Combe'
|
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 cell with the same
content has the background color changed to lime green. Each cell that
was previously highlighted has the background color changed back to
white. This works great with Firefox but does not work correctly with
IE. In IE, none...
|
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 individual table
cell?
Thanks for any pointers.
--
jeremy
|
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 any help,
ShyGuy
|
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 highlighting in C# but I have yet to find anything useful
I know there are people at MS that know this stuff like the front of their hand and I know there are many people out on the web that are proficient in doing this as well but it seems nobody...
| |
by: > Adrian |
last post by:
Is there a way of stopping text from highlighting in textbox?
Many thanks,
Adrian.
|
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 structure:
<div id="menu">
<ul>
<li><a class="first_btn" id="file_btn" onClick="ShowHideFile();">File</a>
<ul id="file" onmouseover="OverFileMenu();" onmouseout="OutFileMenu();">
<li><a...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
| |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |