pytanie do CSS/JS mastah

ogólnie chodzi o to by móc zmieniac kolorystykę dokumentu html. Niby nic prostszego. Różne definicje klass css w osobnych plikach. OK.

Ale jest problem. Mianowicie wyswietlam tabele gdzie podswietlam row nad którym jest kursor. Dodatkowo zapalam ten row na stałe po kliknięciu.

Robie to tak że w metodzie onMoseOver/Out/Click obektu TR wywoluje funkcje JS ktora iteruje przez wszystkie elementy TD i ustawia im styl koloru.
Wszystko działa poprawnie tylko komplikuje sprawę personalizowania wyglądu. bo obok pliku css musze dodawac konfig do kazdego z nich podając wykorzystywane kolory do robienia selekcji.

Gdybym uzywał do tego klas zamiast styli to byłby problem bo niektore kolumny mają justowanie w w lewo a niektore centralnie. Jakbym wiedział jak z definicji klasy (albo wrecz z obiektu) wyciągnąć jego atrybuty to byłoby łatwiej. Ale chyba sie nie da.
Bo kolor ustawiony przez klasę jest nieosiągalny przez np. style.backgroundColor.

Jakby umknęło to czego potrzebuję to nadawanie atrybutów wierszom w tabeli przy uzyciu klas styli.

Jakby ktoś mógł pomóc byłbym dźwięczny

Nie no.. 29ciu mastah przeczytało i żaden nie zna odpowiedzi?

Nie jestem zadnym mastahem ale...
Nie mozesz Maxym, iterujac po TD zmieniac tylko atrybutu CLASS, a ALIGNy zostawic w spokoju.

Chyba ze po prostu nie rozumiem tego iterowania po TD. Ale wyobrazam sobie ze lecisz po komorkach i dla danego wiersza zmieniasz CLASS="odznaczony" na CLASS="zaznaczony" lub CLASS="wybrany".

MaXyM napisał:

Nie no.. 29ciu mastah przeczytało i żaden nie zna odpowiedzi?

ja juz ci dawno odpowiedzialem w 4 oczy - zmienianie koloru rowa przez js jest wbrew specyfikacji HTML wymyslone przez tworcow hypercellsow i daj sobie z tym spokoj

nie wiem czy dobrze kombinuje ale czy chodzi Ci o to, co zastosowano w phpMyAdmin przy przegladaniu zawartosci tabeli?

Richie to będą musieli to włączyć do specyfikacji. Zresztą nie sądze aby to było niezgodne ze specyfikacją bo:
1. metody JS typu onMOseOver/Out/Click są zdefiniowane dla wszystkich obiektów. A ponieważ TR też jest obiektem to nie widzę problemu. No chyba ze FireFox nie umie... ale prosze mi pokazac gdzie pisze ze dla TR nie moga byc zdefiniowane metody JS
2. nadaję atrybuty poprawnie bo nadaje te komórkom TD a nie TRowi. Ja tylko sie dowiaduję jakie TD wchodzą w skład TR i zmieniam ich atrybuty
3. zmiana atrybutów jak background-color jest dozwolona. A jakim sposobem to zrobię to moja sprawa. No chyba że JS jest zabroniony.
4. To że Firefox nie potrafi to żaden argument.

Jedyne co jest nieprawidłowe i o tym wlasnie rozmawialismy to to że TR'a nie można zamknąć w A. tylko powinno sie każdy TD osobno. I mimo że nie znalazłem jawnego ZAKAZU w specyfikacji to kto wie. Moze tak być choć to bez sensu. (przynajmniej ja nie widze zadnego rozsądnego argumentu aby utrzymywac taką sytuację)

M.C.Viper. Tak. Mniej więcej o to (róznica tylko taka że jak kliknę inny row to sie stary odznacza - ale to szczegół). W każdym razie to działa u mnie.

Problem jest w zautomatyzowaniu tego gdy chcę personalizowac widok. I o ile klasy styli mogę trzymać w pliku np. style,css to wartości styli nie mam gdzie przechowywać.

Teraz dla Yapera. Tak sie da pod warunkiem ze wszystkie komórki masz tego samego typu (w szczególności chodzi o justowanie).

Np jedna komorka tabeli ma nadaną klasę: center, a druga np no_wrap_left (nazwy odzwierciedlają przykladowe atrybuty).

W metodzie onMouseOver bym chcial zmienic wybrane atrybuty komorki. Jak zmienię klasę to zmienią mi się wszystkie atrybuty i będę musiał dbać o to aby podawać dla każdej komórki alternatywną, poprawną klasę. To jest możliwe ale trochę kłopotliwe.

Teraz wyglada to w skrocie tak
<TR onMouseOver=SetPointer(this, '#FF0000', 'over'); OnMouseOut=SetPointer(this, '#0000FF', 'out'); OnClick=SetPointer(this, '#FF0000', 'click');>

dla klas teoretycznie wyglądałoby to tak (zakladając tabelę o 3 kolumnach roznie justowanych)

<TR onMouseOver=SetPointer(this, 'sel_left', 'sel_right', 'sel_center', 'over'); OnMouseOut=SetPointer(this, 'unsel_left', 'unsel_right', 'unsel_center', 'out'); OnClick=SetPointer(this, 'sel_left', 'sel_right', 'sel_center', 'click');>

niedosc ze w ch... klepania to trzeba rozwiązac problem różnej ilości komórek. Pewnie w JS jak i w innych językach da się zdefiniowac funkcje dowolnie zmiennej liczbie parametrow. Ale zaczyna to sie robic skomplikowane
Dlatego szukam bardziej automatyznego rozwiązania. Choć ostatecznie jak sie nie będzie dało....
na razie oprócz pliku css trzymam sobie plik konfiguracyny .php w którym mam zdefiniowane te kolory i zmieniam je ustawiając atrybut stylu a klasy nie ruszając

PS. poza tym możliwość używania klas daje taki bajer ze mozna zmieniać dowolnie wszystko od kolorow przez style czcionek az po podkladanie bitmap w komorkach...

OK. Musiałem sam sobie napisać. Ale podzielę się z Wami. Moze się komuś przyda. najpierw funkcje JS. Pierwsza z nich wbrew pozorom przyjmuje dowolną ilość parametrow.
theRow - wskaznik do wiersza tabeli
action - stringi over, out lub click
kolejne parametry to nazwy klas CSS

W momencie wykonania click zapamietywany jest w zmiennych globalnych ostatnio klikniety obiekt oraz jego nawa klasy

Kod:

var preEl; var preClickEl; var preOverEl; function setPointerClass(theRow, action)    {    /* stworzenie tablicy klas CSS na podstawie kolejnych parametrów */    argsnum = setPointerClass.arguments.length;    var classArr = new Array ();    var arr = new Array ();    for (i=0; i<=argsnum; i++)       {       classArr[i] = setPointerClass.arguments[i+2];       }    /*****************************************************************/        if (action == 'click' && theRow != preEl)       {       if (typeof(preEl)!='undefined')          {                 }       if (typeof(preEl)!='undefined')         // jesli bylo cos wczesniej klikniete to          {             if (theRow == preEl) return true;   // jesli to byl ten sam wiersz to nic nie robic          arr = _getClassArray(preClickEl);   // tworzy tablice klassCSS dla obiektu zaznaczonego wczesniej wiersza          _setPointerClass(preEl, arr);      // odznacza stary wiersz          }       preClickEl = preOverEl.cloneNode(true);          _setPointerClass(theRow, classArr);      // zaznaczenie kliknietego wiersza       preEl = theRow;                     // zapamietanie obiektu wskazanego       preOverEl = theRow.cloneNode(true);      // ustawienie obiektu do podstawienia przy zdjeciu kursora       }    else if (action == 'over')       {       preOverEl = theRow.cloneNode(true);      // wykonanie kopii obiektu przed wskazaniem pointerem       _setPointerClass(theRow, classArr);      // ustawienie nowych class styli dla obiektu       }    else if (action == 'out')          {          arr = _getClassArray(preOverEl);          _setPointerClass(theRow, arr);          }    return true    } function _setPointerClass(theRow, classArr)    {    if (typeof(document.getElementsByTagName) != "undefined")       {       var theCells = theRow.getElementsByTagName("td");       }    else if (typeof(theRow.cells) != "undefined")       {       var theCells = theRow.cells;       }    else       {       return false;       }    var rowCellsCnt  = theCells.length;    for (var c = 0; c < rowCellsCnt; c++)       {       if (classArr[c] == "" || classArr[c] == "undefined") theCells[c].className='';       else theCells[c].className = classArr[c];       }    return true;    } function _getClassArray(theRow)    {    var classArr = new Array ();    if (typeof(document.getElementsByTagName) != "undefined")       {       var theCells = theRow.getElementsByTagName("td");       }    else if (typeof(theRow.cells) != "undefined")       {       var theCells = theRow.cells;       }    else       {       return false;       }    var rowCellsCnt  = theCells.length;    for (var c = 0; c < rowCellsCnt; c++)       {       classArr[c] = theCells[c].className;       }    return classArr;    }

A teraz wykorzystanie

Kod:

<TABLE> <TR onmouseover="setPointerClass(this, 'over' , 'left_sel', 'center_sel');" onmouseout="setPointerClass(this, 'out');" onClick="setPointerClass(this, 'click' , 'left_click', 'center_click');"> <TD class="left">kolumnaA</TD> <TD class="center">kolumnaB</TD> </TR> etc

Post powyżej został wyedytowany.
Ulepszyłem trochę te funkcje. Teraz dodatkowo
1. nie trzeba podawac nazw klas CSS dla metody onMouseOut poniewaz funkcja sama zapamietuje te nazwy które były podczas najeżdzania kursorem na wiersz
2. dla onClick można podać inny styl niż dla onMouseOver. Przez co kliknięty wiersz moze miec np. inny kolor niz wiersze wskazywane.

A tak przy okazji to JS jest najbardziej poj... językiem z jakim miałem (nie)przyjemność.
Np. moze ktoś mi wytłumaczy jaka jest róznica między wykonywaiem kopii obiektu poprzez:
objA = objB;
oraz
objA = objB.cloneNode(true);

No to kolejne pytanie

Mamy sobie buttony. Powiedzmy typu submit. Co ciekawe lewy i prawy margines (odstep textu od ramki) jez zalezny od dlugosci textu wypelniającego przycisk. Przy dłuższych napisach jest to denerwujace bo zabiera sporo miejsca.

Udało mi się (pewnie przez przypadek) wykombinować rozwiązanie ale nie jest ono całkiem eleganckie

<TD WIDTH="1%">
<INPUT TYPE="submit" style="width:100%;padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie" >
</TD><TD WIDTH="100%">

Oczywiscie bez zamknięcia buttonu w TD 1% button bedzie zajmowal 100% miejsca ile moze. Co nie jest raczej poszukiwanym rozwiązaniem

Jak ktoś zna zgrabniejsze rozwiązanie (bez angażowania tabel) to byłbym wdzięczny

Wkleilem twoj kod w strone i przycisk w FF zajmuje cala szerokosc. Tak wiec chyba rozwiazanie nie jest OK.

chyba cos zle wkleiles. Dziala dobrze i w IE i w FF
Ponizej caly HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<BODY>
<TABLE><TR>
<TD WIDTH="1%">
<FORM>
<INPUT TYPE="submit" style="width:100%;padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie" >
</TD></FORM>
<TD WIDTH="100%"></TD>
</TR></TABLE>
</BODY>
</HTML>

He he <form> nie zrobilem.

Co ciekawe teraz zostawilem tylko tyle i tez jest OK.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>    <title>Test</title> </head> <body>    <table border="1">       <tr>          <TD>             <form>                <INPUT TYPE="submit" style="width:100%;padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie" >             </form>          </TD>       </tr>    </table> </body> </html>

ale na prawde nie wiem w czym jest problem bo zostawiam tak:

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>    <title>Test</title> </head> <body>    <form>       <INPUT TYPE="submit" style="padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie" >    </form> </body> </html>

i tez jest OK.

Nie wiem czemu ale przeglądarka źle wyświetla HTMLa jesli w DOCTYPE podasz dane jak w twoim przykladzie. po wyrzuceiu adresu konsorcjum działa jak nalezy.

Wklejam wiec HTMLa z 4ma buttonami. kolejno:
- z ustawionym (działającym) paddingiem
- z defaultowymi marginesami
- z marginesami i paddingiem (padding sie sumuje z marginesami), oraz
- z paddingiem bez ograniczenia szerokosci przez nadrzedny elelement

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>    <title>Test</title> </head> <body>    <form>    <Table WIDTH=100%><TR>      <TD>       <INPUT TYPE="submit" style="width:100%;padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie">      </TD>      <TD WIDTH=100%>&nbsp;</TD>     </TR></TABLE>    </form>    <form><INPUT TYPE="submit" NAME="submit" VALUE="Nowe zgłoszenie"></form>    <form><INPUT TYPE="submit" style="padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie"></form>    <form><INPUT TYPE="submit" style="width:100%;padding-left:5;padding-right:5" NAME="submit" VALUE="Nowe zgłoszenie"></form> </body> </html>

Kurde.. do 3 razy sztuka.

Jak zmienic zawartosc komorki tabeli z poziomu JS? (narysowanej juz tabeli). Od razu uprzedze ze rozwiazanie z polem formularza znam i nie do konca mnie satysfakcjonuje.

Kod:

<html> <head> <script language="javaScript">   function zmien() {     document.all.cell.innerHTML="zmieniony tekst";   } </script> </head> <body> <table>   <tr>     <td id="cell">ala ma kota</td>   </tr> </table> <input type="button" onClick="zmien();" value="zmien();"> </body> </html>

testowane na IE, Operze 7.54 i Firefoxie 1.0