Avatar billede mskjoldp Novice
09. december 2004 - 23:15 Der er 12 kommentarer og
1 løsning

bg farve ved klik

Hej E

Er det muligt at skifte bg farven på 1.1 + 2.1 + 3.1 ved onclick på 1.1? Jeg ønsker at markere en kolonne.

eks:
<tr>
<td name="1.1"></td>
<td name="1.2"></td>
<td name="1.3"></td>
</tr>
<tr>
<td name="2.1"></td>
<td name="2.2"></td>
<td name="2.3"></td>
</tr>
<tr>
<td name="3.1"></td>
<td name="3.2"></td>
<td name="3.3"></td>
</tr>

Cellerne bliver kreeret af et asp-bd udtræk.

/Skjold
Avatar billede skovenborg Nybegynder
09. december 2004 - 23:44 #1
du kan prøve:
<script type="text/javascript">
var activeCol= 0;
  function markerKolonne(tdElm,color) {
      var tdId = tdElm.id;
      var num = parseInt(tdId.split(".")[1]);
      if (activeCol) {
            setKolonneFarver(activeCol,"");
      }
      setKolonneFarver(num,color);
      activeCol = num;
  }
  function setKolonneFarver(num,color) {
      var i = 1;
      while (document.getElementById(i+"."+num)) {
            elm = document.getElementById(i+"."+num);
            elm.style.backgroundColor = color;
            i++;
      }
  }
</script>

Men det kræver du ændrer name til id (name er alligevel ikke lovligt i en celle):
<table border="1">
<tr>
<td id="1.1" onclick="markerKolonne(this,'red');">1.1</td>
<td id="1.2" onclick="markerKolonne(this,'red');">1.2</td>
<td id="1.3" onclick="markerKolonne(this,'red');">1.3</td>
</tr>
<tr>
<td id="2.1" onclick="markerKolonne(this,'red');">2.1</td>
<td id="2.2" onclick="markerKolonne(this,'red');">2.2</td>
<td id="2.3" onclick="markerKolonne(this,'red');">2.3</td>
</tr>
<tr>
<td id="3.1" onclick="markerKolonne(this,'red');">3.1</td>
<td id="3.2" onclick="markerKolonne(this,'red');">3.2</td>
<td id="3.3" onclick="markerKolonne(this,'red');">3.3</td>
</tr>
</table>
Avatar billede skovenborg Nybegynder
09. december 2004 - 23:48 #2
ved dog ikke om den skal resettes hver gang sådan at kun én kolonne er valgt. Hvis du gerne vil gøre så man kan afmarkere kolonnen igen kan du skrive:
function markerKolonne(tdElm,color) {
      var tdId = tdElm.id;
      var num = parseInt(tdId.split(".")[1]);

      if (activeCol) {
            setKolonneFarver(activeCol,"");
      }
      if (activeCol == num) {return;} // Stopper funktionen
      setKolonneFarver(num,color);
      activeCol = num;
  }

og hvis man skal kunne vælge flere kolloner og så bare kunne afmarkere dem igen ligesom ovenover, så kan du bruge:
var activeCols = new Array();
  function markerKolonne(tdElm,color) {
      var tdId = tdElm.id;
      var num = parseInt(tdId.split(".")[1]);
      if (activeCols[num]) {
            setKolonneFarver(num,"");
            activeCols[num] = false;
            return;
      }
      setKolonneFarver(num,color);
      activeCols[num] = true;
  }
Avatar billede mskjoldp Novice
10. december 2004 - 02:38 #3
Hej skovenborg, takker for svar.. det ser ud til at kunne laves, men jeg er ikke helt god ti lde der funktioner.

Er det ok hvis jeg smider noget kode og du kan hjælpe mig med at sætte dit eks ind?

udtrækket fra db'en er således:

<!--#include virtual="conn.asp" -->
<a href="default.asp?mode=flystatus" target="_blank">status</a>
<table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0"><tr><td valign="top">
<table border="1"  bordercolor="#000000" cellpadding="2" cellspacing="2">
<%    if session("BrugerNiveau") = "admin" or session("BrugerNiveau") = "o_bruger" then
        if Request.QueryString("MOC_sort") = "" Then
            MOC_sort = "MOC_stelnr"
            hent = "SELECT * FROM stel_nr ORDER BY " & MOC_sort
        else
            MOC_sort = Request.QueryString("MOC_sort")
            hent = "SELECT * FROM stel_nr ORDER BY " & MOC_sort
        end if
            Set rs = Conn.Execute(hent) %>
            <tr>
            <td class="lodret">Halenr</td>
            <td class="lodret">Bloknr</td>
            <td class="lodret">MLU</td>
            <td class="lodret">Flyvetimer</td>
            <td class="lodret">Tilhørsforhold</td>
            </tr>
            <tr>
            <td align="center">1</td>
            <td>2</td>
            <td>3</td>
            <td align="center">4</td>
            <td align="center">5</td>
            </tr>
    <%    Do Until rs.Eof
                fly = rs("MOC_stelnr")
                mstatus = rs("MOC_status")
                loc = rs("MOC_lokation")%>
                <tr>
                <td class="table" height="17px" width="37px" align="center" bgcolor="<%="#"&mstatus%>" ><%=fly%></td>
                <td height="17px" width="19px" align="center" bgcolor="<%="#"&mstatus%>" ><%=rs("MOC_bloknr")%></td>
                <td height="17px" width="19px" align="center" bgcolor="<%="#"&mstatus%>" ><%=rs("MOC_MLU")%></td>
                <td height="17px" width="25px" align="right" bgcolor="<%="#"&mstatus%>" ><%=rs("MOC_timer")%></td>
                <td height="17px" width="47px" align="center" bgcolor="<%="#"&mstatus%>" ><%=rs("MOC_lokation")%></td>
                </tr>
                <%    rs.Movenext
            Loop
        rs.Close
        Set rs = Nothing
    end if%>
</table></td>
<td valign="top">
<div id="Layer1" style="position: relative; width:750; height: auto; z-index:1; visibility: visible; overflow: scroll;">
<table border="1" bordercolor="#000000" cellpadding="2" cellspacing="2">
<%    if session("BrugerNiveau") = "admin" or session("BrugerNiveau") = "o_bruger" then
        if Request.QueryString("MOC_sort") = "" Then
            MOC_sort = "MOC_stelnr"
            hent = "SELECT * FROM stel_nr ORDER BY " & MOC_sort
        else
            MOC_sort = Request.QueryString("MOC_sort")
            hent = "SELECT * FROM stel_nr ORDER BY " & MOC_sort
        end if
        Set rs = Conn.Execute(hent) %>
            <tr>
            <td>&nbsp;</td>
            <td class="lodret">Plan dato</td>
            <td class="lodret">Dato ind </td>
            <td class="lodret">Dato ud </td>
            <td class="lodret">lokation</td>
            <td class="lodret">Eftersyn<br>type</td>
            <td class="lodret">FCF</td>
            </tr>   
            <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            </tr>
<%        Do Until rs.Eof
                fly = rs("MOC_stelnr")
                mstatus = rs("MOC_status")
                loc = rs("MOC_lokation")%>
                <tr onClick="bgColor='#6699FF'" onDblClick="bgColor=''">
                <td height="17px">&nbsp;</td>
        <%    Set rs2 = Conn.Execute("SELECT * FROM status ")
                    Do Until rs2.Eof
                    Sstelnr = rs2("S_stelnr")
                    if fly = Sstelnr then %>
                        <td  nowrap height="17px"><%=rs2("S_plan_dato")%></td>
                        <td  nowrap height="17px"><%=rs2("S_ind_dato")%></td>
                        <td  nowrap height="17px"><%=rs2("S_ud_dato")%></td>
                        <td  nowrap height="17px"><%=rs2("S_lokation")%></td>
                        <td  nowrap height="17px"><%=rs2("S_bem")%></td>
                        <td  nowrap height="17px"><%=rs2("S_FCF")%></td>
            <%    end if
                    rs2.MoveNext
                    Loop
                    rs2.Close
                Set rs2 = Nothing%>
        <%'    end if%>
                </tr>
    <%    rs.Movenext
            Loop
        rs.Close
        Set rs = Nothing
    end if%>
</table></div>
</td></tr></table>

Det jeg så gerne vil opnå, er at hvis jeg klikker på Dato ind, så markeres hele kolonnen med en farve. Og ja det skal være muligt at markere flere på engang, og markeringerne skal kunne fjernes igen ved et dbklik...

Håber ikke det er for meget kode at smide inde her...

/Skjold
Avatar billede mskjoldp Novice
10. december 2004 - 02:41 #4
denne kode (<tr onClick="bgColor='#6699FF'" onDblClick="bgColor=''">) der står omkring sidst, er hvad jeg gerne vil opnå på en kolonne.... men det bliver lidt svært synes jeg når det nu er dynamisk med et udtræk fra en db....
Avatar billede mskjoldp Novice
10. december 2004 - 02:42 #5
btw så har jeg reduceret i koden her til E, opr er der 40 <td> pr <tr> ...
Avatar billede skovenborg Nybegynder
10. december 2004 - 19:14 #6
okay, vi bliver nok nødt til at lave koden lidt om, for din tabel er jo en del anderledes. Som et eksempel viser jeg her en tabel, som den tabel ud vil bruge gerne skulle se ud når du har afviklet din aspkode (i komprimeret form godt nok):
<table border="1">
<tr>
            <td>&nbsp;</td>
            <td class="lodret" onclick="markerKolonne('plandato','red',this,'blue');" ondblclick="afmarkerKolonne('plandato',this);">Plan dato</td>
            <td class="lodret" onclick="markerKolonne('datoind','red',this);" ondblclick="afmarkerKolonne('datoind',this);">Dato ind </td>
            <td class="lodret" onclick="markerKolonne('datoud','red');" ondblclick="afmarkerKolonne('datoud');">Dato ud </td>
            </tr>
<tr>
<td>&nbsp;</td>
<td id="plandato1">Plan Dato 1</td>
<td id="datoind1">Dato Ind 1</td>
<td id="datoud1">Dato Ud 1</td>
</tr>
<tr>
<td>&nbsp;</td>
<td id="plandato2">Plan Dato 2</td>
<td id="datoind2">Dato Ind 2</td>
<td id="datoud2">Dato Ud 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td id="plandato3">Plan Dato 3</td>
<td id="datoind3">Dato Ind 3</td>
<td id="datoud3">Dato Ud 3</td>
</tr>
<tr>
<td>&nbsp;</td>
<td id="plandato4">Plan Dato 4</td>
<td id="datoind4">Dato Ind 4</td>
<td id="datoud4">Dato Ud 4</td>
</tr>
</table>

Scriptet skal nu se sådan ud:
function markerKolonne(idx,color) {
      arg2 = arguments[2];
      arg3 = arguments[3];

      if (arg2) {arg2.style.backgroundColor = (arg3) ? arg3 : color;}
      setKolonneFarver(idx,color);
  }
  function afmarkerKolonne(idx) {
      arg1 = arguments[1];
      if (arg1) {arg1.style.backgroundColor = "";}
      setKolonneFarver(idx,"");
  }
  function setKolonneFarver(idx,color) {
      var i = 1;
      while (document.getElementById(idx+i)) {
            elm = document.getElementById(idx+i);
            elm.style.backgroundColor = color;
            i++;
      }
  }

Det fungerer lidt anderledes end før. markerKolonne kræver de to argumenter idx (den id, din kolonne starter med, se eksemplet på hvordan id'erne skal se ud) og color er ligesom før hvad for en farve du vil bruge.

Jeg har gjort det muligt også at markere den celle man trykker på, hvis du tilføjer this hvor du kalder funktionen, fx: markerKolonne('datoind','red',this);
this referrer til den celle du klikker på (dets objekt). Hvis du gerne vil have en anden farve denne celle skal markeres med tilføjer du et fjerde argument med den farve, fx: markerKolonne('plandato','red',this,'blue');
Nu bliver cellen du klikker på blå - så kan du virkelig få det til at se smart ud :-)

Det kræver du laver lidt om på din aspkode - først og fremmest med at tilføje onclick og ondblclick-eventen på den eller de celle(r) som man skal have mulighed for at klikke på. Desuden skal du i den løkke hvor du printer de andre celler ud:
Do Until rs2.Eof
Sstelnr = rs2("S_stelnr") ....osv.
i denne løkke skal du sørge for at tilføje en id til de forskellige celler, som begynder med en valgt tekst (fx datoind) og så et tal fra 1 og opefter (lav en variabel som indeholder dette tal og tilføj det til id'en, og for hver gang løkken køres skal tallet plusses med 1). Håber du selv ved hvad jeg mener.
Avatar billede skovenborg Nybegynder
10. december 2004 - 19:16 #7
umiddelbart kunne asp-kode se sådan ud (den del med id'en):
<td  nowrap height="17px" id="<%="plandato"&i%>"><%=rs2("S_plan_dato")%></td>
hvor i er et tal som starter med 1, og som du til slut i løkken skal plusse med en:
i = i+1
Kender ikke rigtig asp så kan ikke hjælpe så meget der...
Avatar billede mskjoldp Novice
11. december 2004 - 19:04 #8
hej skovenborg

så har jeg en løsing der virker, med hjælpe fra dine første koder.

løsningen:<!--#include virtual="conn.asp" -->
<script type="text/javascript">
var activeCols = new Array();
  function markerKolonne(tdElm,color) {
      var tdId = tdElm.id;
      var num = parseInt(tdId.split(".")[1]);
      if (activeCols[num]) {
            setKolonneFarver(num,"");
            activeCols[num] = false;
            return;
      }
      setKolonneFarver(num,color);
      activeCols[num] = true;
  }
  function setKolonneFarver(num,color) {
      var i = 1;
      while (document.getElementById(i+"."+num)) {
            elm = document.getElementById(i+"."+num);
            elm.style.backgroundColor = color;
            i++;
      }
  }
</script>
        <table border="1">
        <tr>
        <td id="1.1" onclick="markerKolonne(this,'red');">1</td>
        <td id="1.2" onclick="markerKolonne(this,'red');">2</td>
        <td id="1.3" onclick="markerKolonne(this,'red');">3</td>
        <td id="1.4" onclick="markerKolonne(this,'red');">4</td>
        </tr>
        <tr>
        <td id="2.1" onclick="markerKolonne(this,'red');">5</td>
        <td id="2.2" onclick="markerKolonne(this,'red');">6</td>
        <td id="2.3" onclick="markerKolonne(this,'red');">7</td>
        <td id="2.4" onclick="markerKolonne(this,'red');">8</td>
        </tr>
<%    Set rs = Conn.Execute("SELECT * FROM stel_nr")
        tdtal = 2
        do until rs.eof
        tdtal = tdtal + 1 %>
        <tr>
        <td id="<%=tdtal%>.1" onclick="markerKolonne(this,'red');"><%=tdtal%>.1</td>
        <td id="<%=tdtal%>.2" onclick="markerKolonne(this,'red');"><%=rs("MOCid") & " " & tdtal%></td>
        <td id="<%=tdtal%>.3" onclick="markerKolonne(this,'red');"><%=rs("MOC_stelnr")%></td>
        <td id="<%=tdtal%>.4" onclick="markerKolonne(this,'red');"><%=rs("MOC_MLU")%></td>
        </tr>
<%    rs.movenext
        loop
        rs.close
        set rs = nothing %>
        </table>


Hvis du vil have points, må du ligge et svar.

/Skjold
Avatar billede skovenborg Nybegynder
11. december 2004 - 19:05 #9
okay - super :-)
Avatar billede skovenborg Nybegynder
11. december 2004 - 22:55 #10
og jeg takker for points :-)
Avatar billede mskjoldp Novice
12. december 2004 - 03:59 #11
Jeg har lige et ekstra spg
Avatar billede skovenborg Nybegynder
12. december 2004 - 19:37 #12
okay - sig frem :-)
Avatar billede mskjoldp Novice
24. december 2004 - 07:46 #13
har du et script der kan markere en tr? onclick="bgcolor bl.a. bl.a." virker ikke da der er sat en bgcolor i forvejen...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester