Forum PHP.pl > [JavaScript]Zaznaczanie wiersza tabeli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zaznaczanie wiersza tabeli

lubiemdziem

5.02.2013, 14:33:32

Witam, jestem kompletnym laikiem w JS. Znalazłem skrypt na zaznaczanie wiersza, tylko, że nie działa tak jak chcę. Chcę zaznaczać wiele wierszy na raz (spoko, to łatwe. Wywalić funkcję clearSelection), ale jak odznaczyć wiersz po ponownym kliknięciu?

Tu kod:

[HTML] pobierz, plaintext 
<html>
<head>
 
<style type="text/css">
.highlight {
  background:red;
}
</style>
 
<script type="text/javascript">
var selectedClass='highlight';
var selectedRow=null;
function selectRow(row){
         clearSelection();
         row.className += " "+selectedClass;
         selectedRow=row;
 
}
function clearSelection(){
        var reg = new RegExp('(\\s|^)'+selectedClass+'(\\s|$)');
        if(selectedRow!=null)  selectedRow.className=selectedRow.className.replace(reg,' ');
}
</script>
 
<title>Table</title>
 
</head>
<body>
 
 <table>
  <tr onClick="selectRow(this)"><td>1</td><td>2</td></tr>
  <tr onClick="selectRow(this)"><td>3</td><td>4</td></tr>
  <tr onClick="selectRow(this)"><td>5</td><td>5</td></tr>
  <tr onClick="selectRow(this)"><td>6</td><td>7</td></tr>
</table>
 
</body>
</html>
[HTML] pobierz, plaintext

Pozdrawiam.

kamil4u

5.02.2013, 14:52:12

Chcesz gotowca czy trochę pomyśleć i sam to zrobić? - pytam, bo nie wiem czy mam opisywać wszystko krok po kroku czy po prostu dać Ci gotowy kod.
O jeszcze takie pytanie: w całości rozumiesz powyższy kod?

Praktycznie wszystko masz napisane. Wystarczy trochę przekopiować/pozamieniać i będzie gitara

lubiemdziem

5.02.2013, 14:59:59

Szczerze to nie rozumiem niczego.

Wolę gotowy kod, bo i tak JS to dla mnie czarna magia. Dziękuję slicznie z góry, dam punkt pomógł

kamil4u

5.02.2013, 15:04:47

W sumie lepiej, bo zaoszczędziłeś mi czasu na wyjaśnianie wszystkiego. Chociaż ostatnio mało kto na forum chce się czegoś nauczyć - z reguły chcą gotowca. No nic.

[HTML] pobierz, plaintext 
    <html>
    <head>
 
    <style type="text/css">
    .highlight {
    background:red;
    }
    </style>
 
    <script type="text/javascript">
    var selectedClass='highlight';
    var selectedRow=null;
 
    function selectRow(row){
    if( row.className.indexOf(selectedClass) != -1 )
     clearSelection( row );
    else{
     clearSelection( selectedRow);
 
    row.className += " "+selectedClass;
    selectedRow=row;
     }
    }
    function clearSelection( row ){
    var reg = new RegExp('(\\s|^)'+selectedClass+'(\\s|$)');
    if(selectedRow!=null) row.className=row.className.replace(reg,' ');
    }
    </script>
 
    <title>Table</title>
 
    </head>
    <body>
 
    <table>
    <tr onClick="selectRow(this)"><td>1</td><td>2</td></tr>
    <tr onClick="selectRow(this)"><td>3</td><td>4</td></tr>
    <tr onClick="selectRow(this)"><td>5</td><td>5</td></tr>
    <tr onClick="selectRow(this)"><td>6</td><td>7</td></tr>
    </table>
 
    </body>
    </html>
[HTML] pobierz, plaintext

lubiemdziem

5.02.2013, 15:13:08

Dzięki mistrzu

Co do uczenia się zasady działania skryptów nie mam zwyczajnie czasu. Wiem, smutne to, ale czasem trzeba i tak

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.