Autor Zpráva
ondra256
Profil *
Zdravím!

Vytvářím jednu stránku, která čte pomocí PHP údaje z databáze. Tabulka vypadá svou strukturou takto.
Potřeboval bych, aby při najetí myší na konkrétní řádek změnil onen řádek barvu pozadí.
Jenže nevím, jak to mám zařídit, v tabulce je totiž použit rowspan a colspan a případný OnMouseOver zabarví jedině část tohoto řádku. Ale já ho potřebuji zabarvit celý, aby se například při najetí myší na tu žlutou část obarvil zbytek řádku.
Zkoušel jsem to pomocí OnMouseOver do tagu <tr>, avšak to nefungovalo správně (zde je ukázka chyby).

Jak zabarvit prosím celý řádek naráz při najetí myší na jednu buňku v něm?

Děkuji!
ondrej16556
Profil
Dobrý deň,
upravil som trochu váš zdrojový kód na nasledovný:
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="obr/favicon.gif" rel="icon" type="gif" />
<title>Struktura tabulky</title>
<style>
td {text-align:center}
</style>
<script type="text/javascript">
function colorBack(el,setColor,id)
{
if(id == "1") {
el.style.backgroundColor = setColor;
id1.style.backgroundColor = setColor;
} else if(id == "2") {
el.style.backgroundColor = setColor;
id2.style.backgroundColor = setColor;
} else if(id == "3") {
el.style.backgroundColor = setColor;
id3.style.backgroundColor = setColor;
} else if(id == "4") {
el.style.backgroundColor = setColor;
id4.style.backgroundColor = setColor;
} else if(id == "5") {
el.style.backgroundColor = setColor;
id5.style.backgroundColor = setColor;
} else if(id == "6") {
el.style.backgroundColor = setColor;
id6.style.backgroundColor = setColor;
} else if(id == "7") {
el.style.backgroundColor = setColor;
id7.style.backgroundColor = setColor;
} else if(id == "8") {
el.style.backgroundColor = setColor;
id8.style.backgroundColor = setColor;
} }
function clearBack(el,id)
{
if(id == "1") {
el.style.backgroundColor = '';
id1.style.backgroundColor = '';
} else if(id == "2") {
el.style.backgroundColor = '';
id2.style.backgroundColor = '';
} else if(id == "3") {
el.style.backgroundColor = '';
id3.style.backgroundColor = '';
} else if(id == "4") {
el.style.backgroundColor = '';
id4.style.backgroundColor = '';
} else if(id == "5") {
el.style.backgroundColor = '';
id5.style.backgroundColor = '';
} else if(id == "6") {
el.style.backgroundColor = '';
id6.style.backgroundColor = '';
} else if(id == "7") {
el.style.backgroundColor = '';
id7.style.backgroundColor = '';
} else if(id == "8") {
el.style.backgroundColor = '';
id8.style.backgroundColor = '';
} }
</script>
</head>
<body>

<table border="1" align="center" style="width:944px">
<tr bgcolor="#ebebeb" onmouseover="colorBack(this,'green','1')" onmouseout="clearBack(this,'1');" id="id5"><td rowspan="2" style="background-color:#f7f282"><b>příklad struktury</b></td>
<td>Příklad struktury</td>
<td>Příklad struktury</td>
<td>Příklad struktury</td></tr>
<tr bgcolor="#ebebeb" onmouseover="colorBack(this,'green','5')" onmouseout="clearBack(this,'5');" id="id1"><td style="font-style:italic; text-align:justify; padding:3px 12px" colspan="3">Příklad struktury</td></tr>

<tr bgcolor="#f5f5f5" onmouseover="colorBack(this,'green','2')" onmouseout="clearBack(this,'2');" id="id6"><td rowspan="2" style="background-color:#f7f282"><b>příklad struktury</b></td>
<td>Příklad struktury</td>
<td>Příklad struktury</td>
<td>Příklad struktury</td></tr>
<tr bgcolor="#f5f5f5" onmouseover="colorBack(this,'green','6')" onmouseout="clearBack(this,'6');" id="id2"><td style="font-style:italic; text-align:justify; padding:3px 12px" colspan="3">Příklad struktury</td></tr>

<tr bgcolor="#ebebeb" onmouseover="colorBack(this,'green','3')" onmouseout="clearBack(this,'3');" id="id7"><td rowspan="2" style="background-color:#f7f282"><b>příklad struktury</b></td>
<td>Příklad struktury</td>
<td>Příklad struktury</td>
<td>Příklad struktury</td></tr>
<tr bgcolor="#ebebeb" onmouseover="colorBack(this,'green','7')" onmouseout="clearBack(this,'7');" id="id3"><td style="font-style:italic; text-align:justify; padding:3px 12px" colspan="3">Příklad struktury</td></tr>

<tr bgcolor="#f5f5f5" onmouseover="colorBack(this,'green','4')" onmouseout="clearBack(this,'4');" id="id8"><td rowspan="2" style="background-color:#f7f282"><b>příklad struktury</b></td>
<td>Příklad struktury</td>
<td>Příklad struktury</td>

<td>Příklad struktury</td></tr>
<tr bgcolor="#f5f5f5" onmouseover="colorBack(this,'green','8')" onmouseout="clearBack(this,'8');" id="id4"><td style="font-style:italic; text-align:justify; padding:3px 12px" colspan="3">Příklad struktury</td></tr>

</table>

</body>
</html>

Možno by potreboval trochu upraviť, no dúfam, že som vám aspoň tým pomohol.
ondra256
Profil *
ondrej16556:
Jsem Vám velice vděčný! Funguje to excelentně.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: