[js] OnClick Opcje

[dob]

Chciałem zrobic taki motyw na stronie jak jest w phpmyadminie tzn. po kliknięciu na komórke tabeli zmienia ona kolor na nowy , po kliknięciu jeszcze raz na tą samą komórkę zmienia kolor na stary. Kombinowałem cos z kodem :

Kod

<tr Onclick=this.style.backgroundColor="#EEEEEE"; Onclick=this.style.backgroundColor="#FF8000";>

No ale nie wychodzi, prosze o pomoc

Dzięki

Moderatorzy przeniescie do Java Scriptu bo przez pomyłkę mi sie tu umiescił sorki :oops:

[POLVIP]

Nie mozesz tego tak zrobic - musisz miec function aby zobaczyc jaki jest value tej row.
To jest funkcja co robi to w phpMyAdmin

Kod

<script>

function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)

{

    var theCells = null;



    // 1. Pointer and mark feature are disabled or the browser can't get the

    //    row -> exits

    if ((thePointerColor == '' && theMarkColor == '')

        || typeof(theRow.style) == 'undefined') {

        return false;

    }



    // 2. Gets the current row and exits if the browser can't get it

    if (typeof(document.getElementsByTagName) != 'undefined') {

        theCells = theRow.getElementsByTagName('td');

    }

    else if (typeof(theRow.cells) != 'undefined') {

        theCells = theRow.cells;

    }

    else {

        return false;

    }



    // 3. Gets the current color...

    var rowCellsCnt  = theCells.length;

    var domDetect    = null;

    var currentColor = null;

    var newColor     = null;

    // 3.1 ... with DOM compatible browsers except Opera that does not return

    //         valid values with "getAttribute"

    if (typeof(window.opera) == 'undefined'

        && typeof(theCells[0].getAttribute) != 'undefined') {

        currentColor = theCells[0].getAttribute('bgcolor');

        domDetect    = true;

    }

    // 3.2 ... with other browsers

    else {

        currentColor = theCells[0].style.backgroundColor;

        domDetect    = false;

    } // end 3



    // 4. Defines the new color

    // 4.1 Current color is the default one

    if (currentColor == ''

        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {

        if (theAction == 'over' && thePointerColor != '') {

            newColor              = thePointerColor;

        }

        else if (theAction == 'click' && theMarkColor != '') {

            newColor              = theMarkColor;

            marked_row[theRowNum] = true;

        }

    }

    // 4.1.2 Current color is the pointer one

    else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()

             && (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {

        if (theAction == 'out') {

            newColor              = theDefaultColor;

        }

        else if (theAction == 'click' && theMarkColor != '') {

            newColor              = theMarkColor;

            marked_row[theRowNum] = true;

        }

    }

    // 4.1.3 Current color is the marker one

    else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {

        if (theAction == 'click') {

            newColor              = (thePointerColor != '')

                                  ? thePointerColor

                                  : theDefaultColor;

            marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])

                                  ? true

                                  : null;

        }

    } // end 4



    // 5. Sets the new color...

    if (newColor) {

        var c = null;

        // 5.1 ... with DOM compatible browsers except Opera

        if (domDetect) {

            for (c = 0; c < rowCellsCnt; c++) {

                theCells[c].setAttribute('bgcolor', newColor, 0);

            } // end for

        }

        // 5.2 ... with other browsers

        else {

            for (c = 0; c < rowCellsCnt; c++) {

                theCells[c].style.backgroundColor = newColor;

            }

        }

    } // end 5



    return true;

} // end of the 'setPointer()' function



/*

* Sets/unsets the pointer and marker in vertical browse mode

*

* @param   object    the table row

* @param   interger  the row number

* @param   string    the action calling this script (over, out or click)

* @param   string    the default background color

* @param   string    the color to use for mouseover

* @param   string    the color to use for marking a row

*

* @return  boolean  whether pointer is set or not

*

* @author Garvin Hicking <me@supergarv.de> (rewrite of setPointer.)

*/

</script>

A tak wywolujesz ta funkcje:

Kod

<tr onmouseover="setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');">

[dob]

Dzięki za pomoc, jednak nie daje to takiego efektu jak w phpmyadminie (prawdopodobnie jakoś źle stosuje ten cały kod). Cóż, myslałem ze da sie to załatwić o wiele łatwiej, a sam kod który podałeś jest 2 razy dłuższy od kodu którum wyświetlam sobie rekordy z bazy , więc rezygnuje raczej z tego , no chyba ze znasz kod którym mogłbym zrobic taki bajer że wstawiam w <tr> zadrzenie onClick które zmienia tło w tym <tr>, a po nacisnięciu innego stary powraca do stanu domyślnego a nowy zmienia kolor tła...

Mimo wszystko dzięki

[POLVIP]

zaraz nadtym popracuje
sprawdz za jakas godzinke

[Bakus]

Ja mam coś takiego na jednej ze stronek i działa:

Kod

<TR

     STYLE="cursor: hand;"

     onmouseout="this.style.backgroundColor=''; window.status='';"

     onmouseover="this.style.backgroundColor='#F3F3F3'; window.status='Panel administracyjny';"

     onclick="document.location.href='./panel/';">

          <TD>

               <A HREF="./panel/">Panel administracyjny</A>

          </TD>

     </TR>

<!-- kod podzieliłem na kilka linijek, by był czytelniejszy -->

Tło komórki po ustawieniu this.style.backgroundColor=''; staje się "przeźroczyste"

[dob]

To jeszcze nie ten efekt, licze na POLVIP'a :wink:

[Bakus]

Już wiem!
Wstaw w HEAD:

Kod

<style>

.p{background-color:red;}

.n{background-color:blue;}

</style>

A w BODY

Kod

<TD CLASS="n" onclick="if(this.className == 'p') { this.className = 'n'; }else{ this.className = 'p'; }">tekścik</TD>

Proste jak konstrukcja kija...

[Bakus]

Przykład znajdziesz pod adresem: http://idn.myftp.org/tmp.php

[dob]

Dzięki wielkie działa jak należy :wink: