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:
Pełna wersja: [js] OnClick
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 :
No ale nie wychodzi, prosze o pomoc
Dzięki
Moderatorzy przeniescie do Java Scriptu bo przez pomyłkę mi sie tu umiescił sorki :oops:
No ale nie wychodzi, prosze o pomoc
Dzięki
Moderatorzy przeniescie do Java Scriptu bo przez pomyłkę mi sie tu umiescił sorki :oops:
Nie mozesz tego tak zrobic - musisz miec function aby zobaczyc jaki jest value tej row.
To jest funkcja co robi to w phpMyAdmin
A tak wywolujesz ta funkcje:
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>
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');">
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
, 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
zaraz nadtym popracuje
sprawdz za jakas godzinke
sprawdz za jakas godzinke
Ja mam coś takiego na jednej ze stronek i działa:
Tło komórki po ustawieniu this.style.backgroundColor=''; staje się "przeźroczyste"
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 -->
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"
To jeszcze nie ten efekt, licze na POLVIP'a :wink:
Już wiem!
Wstaw w HEAD:
A w BODY
Proste jak konstrukcja kija...
Wstaw w HEAD:
Kod
<style>
.p{background-color:red;}
.n{background-color:blue;}
</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...
Przykład znajdziesz pod adresem: http://idn.myftp.org/tmp.php
Dzięki wielkie działa jak należy :wink:
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.