Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zaznaczanie wiersza za pomocą pola checkbox
Forum PHP.pl > Forum > Gotowe rozwiązania > Szukam
martinstw
4.11.2008, 18:01:40
Witam!

Zrobiłem sobie tabelkę jak widać poniżej:

<b><TABLE WIDTH=100% BORDER=1>
<TR BORDERCOLOR="black">
<TD HEIGHT=10px WIDTH=1px BGCOLOR="silver"><B>Stan.:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><B>Nr operacji:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px BGCOLOR="silver"><B>Tre¶ć operacji:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=2px BGCOLOR="silver"><CENTER><B>KD</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>Tj [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>Tpz [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>N</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=15px BGCOLOR="silver"><CENTER><B>Tko [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px BGCOLOR="silver"><CENTER><B>Potw.</B></CENTER></TD>
</TR>
<TR BORDERCOLOR="black">
<TD HEIGHT=10px WIDHT=1px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B><a href="Op_mon_S1_05.html/">05</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px><LABEL FOR<B>Wwwwwwwwwww wwwwwwwwwwwwww wwwwwwwwwwwww</B></TD>
<TD HEIGHT=10px WIDTH=2px><CENTER><B>B</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,015</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,020</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>10</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=25px><CENTER><B>124,00</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="S1/05" VALUE="S1/05" ID="wybor1">
</INPUT></P></B></TD>
</TR>
<TR BORDERCOLOR="black">
<TD HEIGHT=10px WIDHT=1px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B><a href="Op_mon_S1_10.html/">10</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px><B>Zzzzzzzzzzzz zzzzzzzzzz z zzzzzzzzzzzz</B></TD>
<TD HEIGHT=10px WIDTH=2px><CENTER><B>D</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,2</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>12,9</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>6</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=25px><CENTER><B>78,00</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="S1/10" VALUE="S1/10">
</P></B></TD>
</TR>
</TABLE>
</b>

Nie wiem w jaki sposób przez zaznaczenie pola checkbox (albo klikniecie w wiersz, zaznaczać pole checkbox i cały wiersz) wybierać jednocześnie cały wiersz (rekord) i żeby wybrane rekordy były podświetlane?
W rekordzie jest jak widać jest 9 kolumn.

Będę wdzięczny za cenne wskazówki:)
magnus
4.11.2008, 18:36:05
Do każdego wiersza tabeli przypisz ID:
Kod
<TR ID="tr_S1/05">
- najlepiej takie, które da się "wyliczyć" z nazwy checkboxa.

W checkboxie dodajesz
Kod
onclick="zaznacz(this);'


A funkcja np. tak:
Kod
<script type="text/javascript">
function zaznacz(ch) {
    tr_name = "tr_"+ch.name; //tu z nazwy checkboxa określasz ID wiersza
    if (ch.checked) {
        document.getElementById(tr_name).style.backgroundColor='yellow';
    } else {
        document.getElementById(tr_name).style.backgroundColor='';
    } //a tu mu zmieniasz kolor tła
}
</script>
martinstw
7.11.2008, 19:17:30
Nie działa mi:( Nic się nie dzieje w wierszach:(

Może ja coś źle wpisuje?

Tak to u mnie wygląda:

<code>
<head>
<script type="text/javascript">
function zaznacz(ch) {
tr_name = "tr_"+ch.name; //z nazwy checkboxa określa się ID wiersza
if (ch.checked) {
document.getElementById(tr_name).style.backgroundColor='yellow';
} else {
document.getElementById(tr_name).style.backgroundColor='red';
} //zmiana koloru tła
}
</SCRIPT>
</HEAD>
</code>

<code>
<TABLE WIDTH=100% BORDER=1>
<TR BORDERCOLOR="black">
<TD HEIGHT=10px WIDTH=1px BGCOLOR="silver"><B>Stan.:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><B>Nr operacji:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px BGCOLOR="silver"><B>Treść operacji:</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=2px BGCOLOR="silver"><CENTER><B>KD</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>Tj [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>Tpz [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px BGCOLOR="silver"><CENTER><B>N</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=15px BGCOLOR="silver"><CENTER><B>Tko [min]</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px BGCOLOR="silver"><CENTER><B>Potw.</B></CENTER></TD>
</TR>
<TR ID="tr_S1_05" BORDERCOLOR="black">
<TD HEIGHT=10px WIDHT=1px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B><a href="Op_mon_S1_05.html/">05</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px><LABEL FOR<B>Wwwwwwwwwww wwwwwwwwwwwwww wwwwwwwwwwwww</B></TD>
<TD HEIGHT=10px WIDTH=2px><CENTER><B>B</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,015</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,020</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>10</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=25px><CENTER><B>124,00</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="wybor" VALUE="S1_05" onClick="zaznacz(this);">
</INPUT></P></B></TD>
</TR>
<TR ID="tr_S1_10" BORDERCOLOR="black">
<TD HEIGHT=10px WIDHT=1px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B><a href="Op_mon_S1_10.html/">10</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px><B>Zzzzzzzzzzzz zzzzzzzzzz z zzzzzzzzzzzz</B></TD>
<TD HEIGHT=10px WIDTH=2px><CENTER><B>D</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,2</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>12,9</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>6</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=25px><CENTER><B>78,00</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="wybor" VALUE="S1_10" onclick="zaznacz(this)">
</P></B></TD>
</TR>
<TR ID="tr_S1.1_120EL" BORDERCOLOR="black">
<TD HEIGHT=10px WIDHT=1px><CENTER><B>S1.1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B><a href="Op_mon_S1.1_120EL.html/">120EL</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=300px><B>Yyyyyyyyyy yyyyy yyyyyyyyyyyyyyyy</B></TD>
<TD HEIGHT=10px WIDTH=2px><CENTER><B>KT</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>0,8</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>10,4</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=20px><CENTER><B>13</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=25px><CENTER><B>52,00</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=30px><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="S1.1/120EL" VALUE="S1.1/120EL" onclick="mark(this)">
</P></B></TD>
</TR></TABLE>
</code>

Także jeśli coś źle robię to proszę o uwagi

Znalazłem już rozwiązanie tego problemu:) Działa bez problemu!

<quote>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--Powoduje zaznaczanie i podświetlanie wybranego całego wiersza i checkboxa przez kliknięcie w pole checkbox-->

<style type="text/css">
td{border:1px solid black;}
tr{background:snow;}
</style>

<script type="text/javascript">
function rowYourBoat(){
var trs=document.getElementById('tabela3').rows;
for(var i=0;i<trs.length;i++){
if(document.formularz1.elements[i].checked){
trs[i].style.background="aqua";
}else{
trs[i].style.background="snow";
}
}
}
</script>
</HEAD>

</quote>

natomiast w BODy mamy:

<quote>

<BODY>
<!-- Tabela 3 -->

<form action="" name="formularz1">
<TABLE WIDTH=100% id="tabela3" onclick="rowYourBoat();">
<TR>
<TD HEIGHT=10px WIDTH=29px><CENTER><B>15</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=39px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=22px><CENTER><B>0</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=66px><CENTER><B><a href="Op_mon_S1_05.html/">050ELAU!</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=515px><LABEL FOR<B>Wwwwwwwwwww wwwwwwwwwwwwww wwwwwwwwwwwww</B></TD>
<TD HEIGHT=10px WIDTH=23px><CENTER><B>B</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=60px><CENTER><B>0,015</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=60px><CENTER><B>0,020</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=18px><CENTER><B>10</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=66px><CENTER><B>120,00</B></CENTER></TD>
<TD HEIGHT=70px WIDTH=><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="wybor" VALUE="S1/05" />
</INPUT></P></B></TD>
</TR>
<TR>
<TD HEIGHT=10px WIDTH=29px><CENTER><B>15</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=39px><CENTER><B>S1</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=22px><CENTER><B>0</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=66px><CENTER><B><a href="Op_mon_S1_05.html/">050ELAU!</a></B></CENTER></TD>
<TD HEIGHT=10px WIDTH=515px><LABEL FOR<B>Wwwwwwwwwww wwwwwwwwwwwwww wwwwwwwwwwwww</B></TD>
<TD HEIGHT=10px WIDTH=23px><CENTER><B>B</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=60px><CENTER><B>0,015</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=60px><CENTER><B>0,020</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=18px><CENTER><B>10</B></CENTER></TD>
<TD HEIGHT=10px WIDTH=66px><CENTER><B>120,00</B></CENTER></TD>
<TD HEIGHT=70px WIDTH=><CENTER><B><P ALIGN="center"><INPUT TYPE="checkbox" NAME="wybor" VALUE="S1/05" />
</INPUT></P></B></TD>
</TR>
</TABLE>
</BODY>
</HTML>
</quote>

Także zamykam ten post i mam nadzieje, że komuś się również przyda to rozwiązanie

Pozdrawiam wszystkich:)
bregovic
7.11.2008, 19:30:54
Używaj BBCode! Tylko święty (lub ktoś z bardzo dużą ilością czasu) przebrnie przez ten kod bez kolorowania...
batman
7.11.2008, 19:41:24
@bregovic Zamiast nabijać posty, użyj przycisku Raportuj.
bregovic
7.11.2008, 20:13:46
@batman, hm, ok, chciałem mu po prostu zwrócić uwagę. Z tego co pamiętam z dawnych dni tego tego forum, raportowania używaliśmy w bardziej poważnych przypadkach. Ale ok, dostosuję się smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.