Markere celle med farve

Du må kun have 1 ID, med samme værdi..

Dvs, det her er IKKE tilladt :-)

...
        <td id="a">&nbsp;</td>
        <th id="b">&nbsp;</th>
        <td id="c">&nbsp;</td>
    </tr>
    <tr>
        <td id="a">&nbsp;</td>
        <th id="b">&nbsp;</th>
        <td id="c">&nbsp;</td>
    </tr>

..osv..

Du kan godt have flere elementer med samme name, men samme ID er ikke tilladt.

hvordan kan vi så fixe det.. ?

lave det som

..
      <td id="1a">&nbsp;</td>
        <th id="1b">&nbsp;</th>
        <td id="1c">&nbsp;</td>
    </tr>
    <tr>
        <td id="2a">&nbsp;</td>
        <th id="2b">&nbsp;</th>
        <td id="2c">&nbsp;</td>
    </tr>

..
osv ?

er ligemeget hvad id eller elementet hedder, bare jeg kan markere en hel kolonne ;)

Jeg laver lige noget kode til dig.. :-)

Det kan sikkert gøres mere elegang, men her er et forslag:

<script type="text/javascript">
tidligere_celle = "";
umarkeret = "#ffffff"; // Ret farven her
markeret = "#ff0000"; // Ret farven her

function skiftfarve(celle,farve)
{
    tds = document.getElementsByTagName("td");
    for(i = 0, len = tds.length; i < len; i++)
    {
        td = tds[i];
        if (td.id.indexOf(celle) == 0) td.bgColor = farve;
    }
}

function marker(elm)
{
    nuvaerende_celle = elm.childNodes[0].nodeValue;
    if (tidligere_celle != "") skiftfarve(tidligere_celle,umarkeret); // reset de gamle celler
    skiftfarve(nuvaerende_celle, markeret);
    tidligere_celle = nuvaerende_celle;
}

</script>

<table style="width: 100%">
    <tr>
        <th onclick="marker(this)">a</td>
        <th onclick="marker(this)">b</th>
        <th onclick="marker(this)">c</th>
    </tr>
    <tr>
        <td id="a1">1</td>
        <td id="b1">2</th>
        <td id="c1">3</td>
    </tr>
    <tr>
        <td id="a2">4</td>
        <td id="b2">5</th>
        <td id="c2">6</td>
    </tr>
    <tr>
        <td id="a3">7</td>
        <td id="b3">8</th>
        <td id="c3">9</td>
    </tr>
    <tr>
        <td id="a4">10</td>
        <td id="b4">11</th>
        <td id="c4">12</td>
    </tr>
</table>


HUSK: ID må ikke starte med et tal.. det skal starte med et bogstav.. :-)

Svar :-)

Hvis du undrer dig over at jeg har skrevet tallene 1-12, er det fordi man skal kunne se, at der er celler..

Du kan bare erstatte 1-12 med "&nbsp;" igen, hvis du vil.. :-)

Yes, det virker..

der er så et lille MEN

Jeg vil gerne man kan have FLERE kolonner markeret samtidig :) bare for at være besværlig.

Dvs hvis jeg gerne vil markere både A B og C..

Så skal fungere således:
klikker man på A første gang, markeres den kolonne med farve, klikker jeg på A igen, fjerner farven sig igen :)

Du er ved at være lidt krævende.. men kan sagtens klare presset.. :-)

Her:

<script type="text/javascript">
tidligere_celle = "";
umarkeret = "#ffffff"; // Ret farven her
markeret = "#ff0000"; // Ret farven her

function skiftfarve(celle)
{
    tds = document.getElementsByTagName("td");
    for(i = 0, len = tds.length; i < len; i++)
    {
        td = tds[i];
        if (td.id.indexOf(celle) == 0)
        {
            if (td.style.backgroundColor == markeret)
            {
                td.style.backgroundColor = umarkeret;
            } else {
                td.style.backgroundColor = markeret;
            }
        }
    }
}

function marker(elm)
{
    nuvaerende_celle = elm.childNodes[0].nodeValue;
    skiftfarve(nuvaerende_celle);
}

</script>

Nu kan man lige så godt slå funktionerne sammen:

<script type="text/javascript">
tidligere_celle = "";
umarkeret = "#ffffff"; // Ret farven her
markeret = "#ff0000"; // Ret farven her

function marker(elm)
{
    celle = elm.childNodes[0].nodeValue;
    tds = document.getElementsByTagName("td");
    for(i = 0, len = tds.length; i < len; i++)
    {
        td = tds[i];
        if (td.id.indexOf(celle) == 0)
        {
            if (td.style.backgroundColor == markeret)
            {
                td.style.backgroundColor = umarkeret;
            } else {
                td.style.backgroundColor = markeret;
            }
        }
    }
}
</script>