onmouseover färga två rader

3 svar · 357 visningar · startad av The_Hulk 20 juli 2005

The_HulkMedlem sedan juni 20031 837 inlägg

Frågan20 juli 2005 19:01#1

Hejsan!

Har sett javascript för att färga en rad i en tabell när muspekaren befinner sig över den.

Jag vill ha en som är lite mer speciell som ska färga två rader åt gången.

Det gäller nämligen en lista där varje element i listan sträcker sig över två rader med information. Jag måste ha det på två rader för att det ska se snyggt ut.

Någon som har sett detn någonstans eller kanske sitter på ett och vill dela med sig?

Tack på förhand!

nitro2k01Medlem sedan aug. 20039 340 inlägg

21 juli 2005 18:57#2

Så här fick jag det till.
Det första argumentet till funktionen är this i onmouseover. Det andra argumentet sätter du till false om funktionen kallas från en övre rad (Vilket gör att raden under också påverkas) eller true om funktionen kallas från en undre rad (Vilket gör att raden över påverkas)
Det tredje argumentet struntar du i om funktionen kallas från onmouseover eller sätter till true om den kallas från onmouseout.
Lycka till!

<html>
<style type="text/css">
tr	{background: green}

</style>
<script type="text/javascript">
function hoverRow(theTr, bottomRow, unhover){
	hColor=unhover?"":"red";

	//alert(theTr.children.length)
	for(i=0; i<theTr.children.length; i++){
		theTr.children[i].style.backgroundColor=hColor;
	}

	complement = bottomRow ? theTr.previousSibling : theTr.nextSibling;

	for(i=0; i<complement.children.length; i++){
		complement.children[i].style.backgroundColor=hColor;
	}

}

</script>

<table border="1" width="600">
<tr onmouseover="hoverRow(this, false);" onmouseout="hoverRow(this, false, true);">
	<td colspan="2">Titel</td>
</tr>
<tr onmouseover="hoverRow(this, true);" onmouseout="hoverRow(this, true, true);">
	<td>Info1</td><td>Info1</td>
</tr>

<tr onmouseover="hoverRow(this, false);" onmouseout="hoverRow(this, false, true);">
	<td colspan="2">Titel</td>
</tr>
<tr onmouseover="hoverRow(this, true);" onmouseout="hoverRow(this, true, true);">
	<td>Info1</td><td>Info1</td>
</tr>

<tr onmouseover="hoverRow(this, false);" onmouseout="hoverRow(this, false, true);">
	<td colspan="2">Titel</td>
</tr>
<tr onmouseover="hoverRow(this, true);" onmouseout="hoverRow(this, true, true);">
	<td>Info1</td><td>Info1</td>
</tr>

</table>

</html>

zcorpanMedlem sedan dec. 20042 245 inlägg

21 juli 2005 21:39#3

Med javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>hover</title>
<style type="text/css">
 table { border-collapse:collapse; width:50%; }
 td { border:thin solid; }
 .hover td { background:lime; }
</style>
<script type="text/javascript">
 window.onload = function(){
  var tbody = document.getElementById("foo").getElementsByTagName("tbody")[0];
  var trs = tbody.getElementsByTagName("tr");
  var i = trs.length;
  while (i--){
   if (i % 2)
    trs[i].onmouseover = function(){
     this.className += " hover";
     if (this.previousSibling)
      this.previousSibling.className += " hover";
    }
   else
    trs[i].onmouseover = function(){
     this.className += " hover";
     if (this.nextSibling)
      this.nextSibling.className += " hover";
    }
   trs[i].onmouseout = function(){
    this.className = this.className.replace(/\bhover\b/, "");
    if (this.nextSibling)
     this.nextSibling.className = this.nextSibling.className.replace(/\bhover\b/, "");
    if (this.previousSibling.className)
     this.previousSibling.className = this.previousSibling.className.replace(/\bhover\b/, "");
   }
  }
 }
</script>
<table id="foo">
 <thead>
  <tr><th>aaa<th>bbb
 <tbody>
  <tr><td>foo<td>bar
  <tr><td>baz<td>quux
  <tr><td>foo<td>bar
  <tr><td>baz<td>quux
  <tr><td>foo<td>bar
  <tr><td>baz<td>quux
</table>

Du kan inkludera alla valbara taggar om du vill, men se till att det inte finns nåt mellanrum mellan </tr> och <tr>

Med CSS3

 tr:nth-child(odd):hover td,
 tr:nth-child(odd):hover + tr td,
 tr:nth-child(even) td,
 tr:nth-child(even):matches( + tr:hover) td { background:lime; }

:matches är inte med i utkastet för CSS3 ännu, men det har varit på tal. Detta funkar inte i nån webbläsare idag, förstås... :e

StorsmurfenMedlem sedan juli 20059 inlägg

22 juli 2005 15:09#4

ops, det blev fel.