Jquery - zmiana koloru kolumn

0

Witam mam za zadanie zmiane koloru klikniętego wiersza tabeli oraz tylko jego kolumn parzystych na podany kolor
Oto jak przedstawia się kod w znaczniku body

<table> 
   
<thead> 
<tr> 
<th scope=&quot;row&quot;>Obecności</th><th scope=&quot;row&quot;>Grupa GL01</th><th scope=&quot;row&quot;>Grupa GL02</th><th scope=&quot;row&quot;>Grupa GL03</th><th scope=&quot;row&quot;>Grupa GL04</th> 
</tr> 
</thead>       
<tbody> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 1</th><td>16</td><td>22</td><td>20</td><td>19</td>
</tr> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 2</th><td>18</td><td>21</td><td>20</td><td>19</td> 
</tr> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 3</th><td>18</td><td>22</td><td>20</td><td>18</td> 
</tr> 
</tbody>       
</table>

Oraz niedzialajacy kod jquery

 $(document).ready(function(){
    $('td:even').click(function(){
       $(this).css('background-color', 'red');
    });
});

Jakby ktoś mógł mnie naprowadzić byłbym wdzięczny

0

Hmmm... pisane z palca:

$(document).ready(function()
{
	$('td').click(function()
	{
		$('td:even', $(this).parent('tr')).css('background-color', 'red');
	});
});
0

dzięki za odpowiedź , jednak nadal zmienia kolor wszystkim wierszom ;/

0

Przecież MIAŁO "zmieniać kolor wszystkim wierszom", tj. po kliknięciu dowolnego wiersza (oprócz nagłówkowych), kolor parzystych komórek z tego wiersza miał zostać zmieniony. Dokładnie tak działa skrypt Adama -- poza tym szczegółem, że wiersz nie jest podświetlany gdy kliknie się w pierwszą, nagłówkową komórkę (*).

Może popełniłeś błąd w wymaganiach (opisie skryptu)?

(*) Ten drobny problem można rozwiązać, zmieniając pierwszy z użytych selektorów tak, by uwzględniał zarówno td, jak i th -- ale tylko te, które są w tbody:

$(document).ready(function()
{
        $('tbody th, tbody td').click(function()
        {
                $('td:even', $(this).parent('tr')).css('background-color', 'red');
        });
});
0

rzeczywiście mogłem żle sformułować moje pytanie , przepraszam za wprowadzenie w błąd
a więc moim zadaniem jest:
"JQuery utwórz kod warstwy zdarzeniowej, którego zadaniem będzie zmiana koloru klikniętego wiersza tabeli oraz tylko jej kolumn parzystych na kolor o wartości hexadecymalnej CCFFC, tak aby nie modyfikować sekcji body "

0

@K0nio:
I jak to się ma do tego, co napisałeś wcześniej: "nadal zmienia kolor wszystkim wierszom ;/".

O co Ci chodzi? Jak to zmienia kolor wszystkim wierszom? Zmienia kolor tylko klikniętego wiersza, przy czym może to być dowolny wiersz oprócz pierwszego.

Zadanie jest napisane ździebko niejednoznacznie. Tekst: "zmiana koloru klikniętego wiersza tabeli oraz tylko jej kolumn parzystych" można interpretować też tak, że po kliknięciu na jakiś wiersz, skrypt ma zmienić kolor tła tego wiersza (wszystkich komórek) ORAZ kolor tła tych komórek SPOZA klikniętego wiersza (czyli komórek w innych wierszach), które należą do parzystych kolumn tabeli. To jednak byłoby wg mnie bez sensu, więc ta nasza interpretacja wydaje się poprawna. Kolor oczywiście sam sobie zmień na ten podany w zadaniu.

Coś Cię jednak najwyraźniej niepokoi. Koniecznie powiedz co, bo może wiesz lub widzisz coś innego niż my. Dasz radę chyba w końcu wytłumaczyć, o jakie działanie skryptu Ci chodzi i czym się ono różni od bieżącego działania.

0

[1][2][3][4] - powiedzmy , że są to komorki i po kliknięciu w komórkę nr 2 , kolor zmieniają wszystkie komórki , a wydaje mi się, że powinny zmieniać się komórki nr 2 i 4

0

Nie jest tak. Testuję u siebie skrypt, który wstawiłem w przedostatnim poście i działa tak, jakbyś chciał: podświetla [2] i [4], a nie wszystkie.

Wklej pełen kod dokumentu HTML, który masz. Wywal niepotrzebne rzeczy, ale zostaw tyle (włącznie z DOCTYPEm itd.), żeby było widać efekt o którym mówisz. Zobaczymy co jest źle.

PS. Na wszelki wypadek: pod jaką przeglądarką testujesz? Nazwa/wersja.

0

testowalem na operze 10.62, chrome 9.0.597.94 oraz ff 3.6.13 i na każdej wszystkie komórki zmieniają kolor

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.js"></script>
	<script type="text/javascript">
	
	///////////////////////////////////////////////
$(document).ready(function()
{
        $('tbody th, tbody td').click(function()
        {
                $('td:even', $(this).parent('tr')).css('background-color', 'red');
        });
});



	</script>


<title>Kolokwium zaliczeniowe</title>


<style>
BODY {background-color: "#FFFFFF";}

 
H3
{
  color: blue;
}
TABLE
{
 background: red;
 border: 8px outset red;

}
THEAD
{
background-color:#C0C0C0;
}
TBODY
{
background-color:white;
}
TFOOT
{
background-color:yellow;
}

CAPTION
{
font-style:italic;
text-align:left;
}

TD
{
font-style:italic;
text-align:center;
}
[scope="row"] 
{
color: red;
padding:10px; 
}
[scope="col"]
{
color:navy;
background-color:#C0C0C0;
padding:10px;
}

</style>
</head>


<body>
<div align="center">
<div><br><br><br><br></div>

<h3> Kolokwium zaliczeniowe z przedmiotu "Języki internetowe" </h3>

<div align="center">
<table> 
   
<thead> 
<tr> 
<th scope=&quot;row&quot;>Obecności</th><th scope=&quot;row&quot;>Grupa GL01</th><th scope=&quot;row&quot;>Grupa GL02</th><th scope=&quot;row&quot;>Grupa GL03</th><th scope=&quot;row&quot;>Grupa GL04</th> 
</tr> 
</thead>       
<tbody> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 1</th><td>16</td><td>22</td><td>20</td><td>19</td>
</tr> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 2</th><td>18</td><td>21</td><td>20</td><td>19</td> 
</tr> 
<tr> 
<th scope=&quot;col&quot;>Laboratorium nr 3</th><td>18</td><td>22</td><td>20</td><td>18</td> 
</tr> 
</tbody>       
</table> 
</div>

</body>
</html>
0

U mnie ten kod z Twojego posta działa na najnowszym Firefoxie (czyli takim jak Ty masz), Chrome (j/w) i Operze (Ty masz starszą). Jak klikniesz na dowolną komórkę lewym przyciskiem, to kolor zmieniają tylko nieparzyste komórki z tego wiersza. Używam jQuery 1.4.4.

Btw., zamiast &quot; otaczających atrybuty użyj po prostu cudzysłowów: ". Tak jak masz to jest błąd. Masz też niezamkniętego div-a. Wywal po prostu to DRUGIE <div align="center">. I dodaj do tagu <style> atrybut type="text/css", bo w DOCTYPIE którego używasz jest on wymagany.

Ciekawe czemu u Ciebie to nie działa. Nie widzę takiego powodu, a u mnie nie potrafię tego odtworzyć.

Umówmy się, że będziemy testować w Firefoxie 3.6.13. Gdzie klikasz? Kliknij lewym przyciskiem myszy np. na drugie "o" w tekście "Laboratorium nr 2". Zrób screena po jednym kliknięciu i tu wstaw.

0

działa nie wiem czemu wcześniej nie chciało ( na starszej operze również). Nic nie zmieniałem w kodzie bo jest to plik stworzony przez pana doktora :D na zaliczeniu i nie pozwala zmieniać tego co siedzi w body . Dziękuję za pomoc i poświęcony czas , mam nadzieje, że na zaliczeniu z jquery sobie jakoś poradzę.

0

Przepraszam, że post pod postem , ale chciałem, żeby wiadomość została zauważona a jeśli mam za zadanie zrobić coś takiego "utwórz kod warstwy zdarzeniowej, którego zadaniem będzie ukrycie klikniętej kolumny tabeli (jednocześnie może zostać ukryta tylko jedna kolumna) oraz jej odkrycie po ponownym kliknięciu na pozostałe. " , mam taki kod jednak coś w nim jest nie tak , moglibyście coś doradzić?

 	$(document).ready(function()
{
$('table').toggle(
         function()
         {
            $("tr").click(function(){
               $(this).hide();
            });
            
         },
         function()
         {
            $("tr").click(function(){
               $("tr").show();
            });
         }
      
      )};

1 użytkowników online, w tym zalogowanych: 0, gości: 1