Baggrunds farve

ja

brug onmousover

Ja, så langt er jeg kommet. Jeg har fundet hvilket elememnt der trykkes på. Så jeg tror det er noget med at sige parent til den td og så sætte bgcolor på tabellen?

function whichElement()
{
    var tname
    tname=window.event.srcElement.tagName ;
    alert("You clicked on a " + tname + " element.")
   
}

eller onMouseClick

2 sek, jeg sender dig et om 2 sek.

<html>

    <head>
        <title>din title</title>
        <script language="javascript">
       
function rowOver(){
    lmnt = window.event.srcElement;
    if (lmnt.tagName.toUpperCase() == 'TABLE')
        return;
    while (lmnt.tagName.toUpperCase() !='TR')
        lmnt = lmnt.parentElement;
    lmnt.style.background = "#D1E0C7";
}

function rowOut(){
    lmnt = window.event.srcElement;
    if (lmnt.tagName.toUpperCase() == 'TABLE')
        return;
    while (lmnt.tagName.toUpperCase() !='TR')
        lmnt = lmnt.parentElement;
    lmnt.style.background ="#E6F5E3";
}

function rowOverTD(){
    lmnt = window.event.srcElement;
    if (lmnt.tagName.toUpperCase() == 'TABLE')
        return;
    while (lmnt.tagName.toUpperCase() !='TD')
        lmnt = lmnt.parentElement;
    lmnt.style.background = "#D1E0C7";
}

function rowOutTD(){
    lmnt = window.event.srcElement;
    if (lmnt.tagName.toUpperCase() == 'TABLE')
        return;
    while (lmnt.tagName.toUpperCase() !='TD')
        lmnt = lmnt.parentElement;
    lmnt.style.background ="#E6F5E3";
}

</script>
    </head>

    <body marginwidth="0" topmargin="0" link="#13205f" alink="#13205f" vlink="#13205f" text="#13205f">
        <center>
            <table width="350" onmouseover="rowOver();" onmouseout="rowOut();">
                <tr bgcolor="#E6F5E3">
                    <td align="left" width="137"><a href="side2.html" onclick="java script:vindue(1);" style="font-style: none; text-decoration: none;"><font  face="arial" size="1">nr. 1</font></a></td>
                    <td align="center" width="42"></td>
                    <td align="center" width="35"></td>
                    <td align="center" width="56"></td>
                    <td align="center" width="68"></td>
                </tr>
                <tr bgcolor="#E6F5E3">
                    <td align="left" width="137"><a href="side1.html" onclick="java script:vindue(2);" style="font-style: none; text-decoration: none;"><font  face="arial" size="1">nr 2.</font></a></td>
                    <td align="center" width="42"></td>
                    <td align="center" width="35"></td>
                    <td align="center" width="56"></td>
                    <td align="center" width="68"></td>
                </tr>
            </table>
        </center>
    </body>

</html>

- jeg har leget lidt :) der er to tabeller plus lidt mere det kan du bare lave om på. :)

Endnu en variant. Måske lidt mere enkel? Jeg har forsøgt at tage spørgsmålet helt bogstaveligt:

<title>titlen</title>
    <script>
    function farve(nummer)
    {
    document.getElementById(nummer).style.background="blue";
    }   
   
    </script>
</head>

<body >
<table id="nr">
<tr>
<td onclick="farve('nr')">
TD nummer 1
</td>
<td onclick="farve('nr')">
TD nummer 2
</td>
</tr>

</table>

Nu har jeg dette og det virker på onclick. Når man clicker på en td, så farves hele tabellen. Hvordan får jeg det sådan, at når jeg trykker på en ny td, så er det kun den nye tabel der er trykket på der er farvet?

function whichElement()
{
    var tname
    tname=window.event.srcElement;
        tname.parentElement.style.background ="#E6F5E3";
   
}

mig? - jeg forstå ikke...

du laver en ny:
<table>
</table>
jeg forstå ikk helt...

Du kan f.eks. gøre sådan:

<script>
    var udvalg="";
    function farve(nummer)
    {
    if (udvalg!="")
document.getElementById(udvalg).style.background="white";
    udvalg=nummer
    document.getElementById(nummer).style.background="blue";
    }   
   
    </script>
</head>

<body >
<table id="nr">
<tr>
<td onclick="farve('nr')">
TD nummer 1
</td>
<td onclick="farve('nr')">
TD nummer 2
</td>
</tr>

</table>
<table id="andetnr">
<tr>
<td onclick="farve('andetnr')">
TD nummer 1
</td>
<td onclick="farve('andetnr')">
TD nummer 2
</td>
</tr>

</table>

hmm... den er lidt kortere, og mere forståligere :)

Boris >> Det skal laves uden at TDér får en id eller en onclick-funktion. Dvs. at alt funktionalitet skal lige i script.

Jeg har svaret på spørgsmålet:
"Jeg har en tabel der indeholder andre tabeller og TDér. Meningen er at når man trykker på en td med musen, så skal baggrundsfarven ændres i hele den tabel som tilhøre den td der blev trykket på.

Er spørgsmålet forstået? "
Svaret virker.
Når man klikker på en td, ændres baggrundsfarven i tabellen og når man trykker på en td i en anden tabel, skfiter baggrundsfarven over til den nye tabel....

Sådan ser min tabel ud. Når jeg trykker på en TD farves hele tabellen for den TD.

Det der så skal sker er:
Når jeg trykker på en TD i en anden tabel, så farves den nye tabel og de andre tabeller har så ingen farve. Hjalp det?

<table cellspacing="5" cellpadding="5" border="1">
<tr>
  <td>
    <table cellspacing="5" cellpadding="5" border="1">
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;b</td>
        <td width="50">&nbsp;c</td>
    </table>
  </td>
</tr>
<tr>
    <td>
    <table cellspacing="5" cellpadding="5" border="1">
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>
    </table>
  </td>
</tr>
<tr>
    <td>
    <table cellspacing="5" cellpadding="5" border="1">
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>
        <td width="50">&nbsp;</td>
    </table>
  </td>
</tr>
</table>

Jo, men du skal jo have en eller anden event, som styrer det.
Også for den tabel, som ikke skal være farvet længere.
Jeg har gemt navnet på den tabel, som skal "farves tilbage igen", når den nye tabel skal farves.

Boris >>

Den event får jeg fra <BODY onclick="whichElement()">

function whichElement()
{
    var tname
    tname=window.event.srcElement;   
    tname.parentElement.style.background ="#E6F5E3";
}

Det her virker
<script>
    var sidste
    function whichElement()
{
    if (sidste != null)
    sidste.parentElement.style.background ="white";
    var tname
    tname=window.event.srcElement;   
    tname.parentElement.style.background ="#E6F5E3";
    sidste=tname;
}
   
    </script>

Men der er lige det problem, at funktionen også virker på andet end tabeller. Hvis du f.eks. klikker på en <hr> linie, bliver hele siden farvet grøn!

Tak for hjælpen.