Najechanie na komórke <td> podświetli inną.

0

Witam
Mam taki pomysł nad którym myślę już ze dwa tygodnie :<
Otóż mam taki zarys strony, po lewej lista produktów, po prawej tabelka z widokiem pozycji miejsca w magazynie.
user image
http://img221.imageshack.us/img221/810/magazyn.png
I chciałbym zrobić tak aby z listy po lewej stronie która będzie tworzona w tabelce, po kliknięciu czy tam tylko najechaniu na tą komórkę z nazwą produktu podświetliła mi się inna komórka w innej tabeli w której to ten produkt się znajduje.
Próbowałem wcześniej po prostu wstawić jako obrazek i dodać do niego mapowanie każdego rejonu lub jako tabelka i dodawać tooltip, ale to tylko niestety działa tak ze trzeba "latać po mapce" i dopiero się pokazuje.

Wiem że to taki bajer, ponieważ ta lista produktów bedzie korzystała z jquery do wyszukiwania produktu, i od razu będzie widać na jakiej pozycji dany produkt się znajduje, ale gdyby można było jeszcze dodać taki myk co by od razu wizualnie podświetlało mi na mapce magazynu konkretne miejsce to byłaby już rewelacja.

Jak ktoś wpadnie na jakikolwiek pomysł pisać śmiało, trzeba testować :)

0

Rozumiem, że z jQuery nie kojarzysz nic?
Żadnej filozofii tu nie ma, przy Twojej liście masz oznaczone miejsce w magazynie więc niech to wygląda jakoś tak:

<table id="lista">
<thead>
<tr><th>pozycja</th><th>nazwa</th></tr>
</thead>
<tbody>
<tr data-pozycja="3"><td>3</td><td>Produkt 1</td></tr>
<tr data-pozycja="3"><td>3</td><td>Produkt 2</td></tr>
<tr data-pozycja="9"><td>9</td><td>Produkt 3</td></tr>
</tbody>

Komórka w "magazynie" niech będzie też miała swój odpowiadający atrybut data-pozycja.
Następnie w jQuery w zdarzeniu hover (Google) przy selektorze #lista>tbody>tr przy pomocy attr (Google) pobierasz data-pozycja. Następnie odpowiednim selektorem dobierasz taką komórkę w magazynie i przy pomocy addClass dodajesz klasę np. podswietlony. W CSS dopisujesz regułkę z klasą podswietlony - style już wg uznania. Pamiętaj też, że hover w jQuery to dwie funkcje - jedna po najechaniu myszą, druga po "zjechaniu" - w drugiej przy pomocy removeClass usuniesz podświetlenie.

0

Z jQuery tylko z gotowców korzystam, skleję to dodam tamto :/ , Sama wyszukiwarka produktu z tabeli będzie pracowała na działaniu jquery.
Szukając tym hasłem hover co podałeś, trafiłem po dniu na jakąś ruska stronę gdzie był taki kod, tylko ze on jakby nie pobiera która komórka ma się podświetlać, bo jakoś jest że dodaje +1, zmieniłem w 3 produktach ze niby pozycja pierwsza a nadal tak samo sie poświetla, nie ogarniam tego jeszcze.
Ale fakt faktem jestem juz bliżej niż dalej, ponieważ podświetla w dwóch oddzielnych tabelach :) Musze jeszcze przewertować z tym attr z czym to się je.
Jak ktoś chętny coś lekko dopowiedzieć z checia wszystko przyjmę, moze nawet nie wynik tylko jakieś podpowiedzi, jest co robić wieczorkami :<

 <html>
<head>
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style>
    .podswietlenie {background:gray;}
    </style>
    <body>
	
	<script>
	$(document).ready(function() {
    $("table#names tr:not(:first-child)").each(function(k, v){
        var self = this;
        (function(index){ // index: 0 = second row; 1= 3rd row... of table#names
            $(self).hover(
                function() {
                    $(this).addClass("podswietlenie");                
                  
//
                    $('table#names').parent().siblings().find('tr.poz'+(index+1)).addClass("podswietlenie");
                }, function() {
  $('table#names').parent().siblings().find('tr.poz'+(index+1)).removeClass("podswietlenie");
                    $(this).removeClass("podswietlenie");
                }
            );
        })(k); // pass index
    });
});
</script>
</head>


        <div>
            <div style="float: left">
                <table id="names" class="grid" style="width:200px">
                    <tr class="poz0"><th style="width:40%">firma</th><th>Produkt</th></tr>
                    <tr class="poz1"><td>Firma 1</td><td>Produkt 1</td></tr>
                    <tr class="poz1"><td>Firma 1</td><td>Produkt 2</td></tr>
                    <tr class="poz3"><td>Firma 1</td><td>Produkt 3</td></tr>
                    <tr class="poz4"><td>Firma 2</td><td>Produkt 4</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="float: right; overflow-x: scroll">
                <table id="results" class="grid" style="width:100px">
                    <tr class="poz0"><th>Test 1</th></tr>
                    <tr class="poz1"><td>1</td></tr>
                    <tr class="poz2"><td>2</td></tr>
                    <tr class="poz3"><td>3</td></tr>
                    <tr class="poz4"><td>4</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>
0

Nie kopiuj niczego do swojego projektu, czego nie rozumiesz - zamiast poświęcić 2 dni na naukę - będziesz z każdym (nawet prawie identycznym) problemem musiał prosić o pomoc na forum i czekać kolejne dni - to się mija z celem.
Jeżeli zatrzymałeś się już na działaniu hover - to po prostu siedź w dokumentacji jQuery tylko na zakładce hover, analizuj przykłady i treść dokumentacji - aż uda Ci się zrobić coś z samym hover. Potem przeczytaj kawałek dalej i znowu - spróbuj to zrozumieć i połącz z hover. Ja Ci dałem opis krok po kroczku, więc teraz są dwie opcje:

  • powoli nauczysz się tego, korzystając z opisu, dokumentacji i ew. jakichś materiałów ekstra z sieci --- nauczysz się rozwiązać problem
  • dostaniesz gotowca --- tu odpada element nauki
    Pomiędzy metodą krok po kroku a gotowiec nie ma już chyba nic (oprócz przepisania dokumentacji i innych materiałów z sieci) :(
0

Ale wiesz, nie chcę sie tego uczyć od podstaw, bo nie ten wiek i nie taka praca, i czasu mało, mam pomysł zrobić podgląd magazynu i to chcę wykonać, to jest mój cel, a nie nauka, Ostatnio z rok temu też dumałem nad tworzeniem baz danych i wyświetlania zawartości tabel, co w sumie też mógłbym tu coś z tym zadziałać, chodzi o baze produktów no ale :< Chodzi mi tylko o to że chcąc dostać jakieś rozwiązanie/podpowiedź, nie znaczy ze jestem leń i cwany lis :) po prostu mój "projekt" to ta baza produktów a nie uczenie się jak to zrobić od podstawy.
Fakt faktem przeglądam dalej dokumentacje jquery, może coś wpadnie do głowy jak te klasy wydobyć ;)

0

Wpadłem na taki pomysł, akurat mi się nie przyda, ale może akurat komuś.., jedynie podmiana w css, niestety działa tylko w obrębie jednej tabelki i nie da się odnieść z kilku pól (np produktów) do jednego "miejsca" :/
Niestety jquery nic nie ogarniam i kompletnie nie wiem jak odnosić się tymi klasami :/ , W ogóle teraz policzyłem ze będzie ok 300 miejsc w tym magazynie, ciekawe czy to będzie po prostu działać jak odpalę to na jquery

 	<html>
<head>
<style>

#poz1:hover + #poz2{
    background-color: blue;
}

#poz3:hover + #poz4{
    background-color: blue;
}

</style>
</head>
<body>

<table>
    <tr>
        <td id="poz1">Produkt 1
        </td>
        <td id="poz2">Miejsce 1
        </td>
    </tr>
	<tr>
        <td id="poz3">Produkt 2
        </td>
        <td id="poz4">Miejsce 2
        </td>
    </tr>
</table>


</body>
</html>
0

Miałeś ponad tydzień na ogarnięcie javascriptu / jQuery.. Ech. Wieczorem Ci to napiszę

0

Aha, ponoć programiści całe życie się uczą, tak więc, czym jest ten marny tydzień ;)
Czytałem razem z translatorem gogle tą stronkę http://api.jquery.com/ i tutaj fajnie rozwiązaniami sypią ludzie, http://stackoverflow.com/questions/tagged/jquery niestety nie miałem błysku co by rozwiązać moje zadanie.

1

mam nadzieje ze cos z tego wyniesiesz
http://jsbin.com/efezop/1/

0

A daj sobie w onclick czy onmousemove każdej z komórek po lewej stronie funkcję

function ChangeState(id, active) {
   var x = document.getElementById(id);
   if (active) 
      {
          x.style.background = #f22; /* czy jaki kolwiek inny, tak by wyglądał na podświetlenie */
      }
   else
      {
          x.style.background = #f00; /* czy jaki kolwiek inny, tak by NIE wyglądał na podświetlenie */
      }      
}
0

dzek69 no że tak powiem działa idealnie, o to mi chodziło :)
Fakt, że próbowałem wstawić to do tego skryptu http://www.datatables.net/ i nie bungla bo się krzaczy, też tam już są zdefiniowane kolorki. Ale juz znalazłem oddzielnie kodzik do wyszukiwania live i do dzielenia tabeli na strony, co by te 1,5k produktów nie wrzucać w jednym słupku. Jak zrobię zapodam dla potomnych :<
TomRiddle ten twój myk też może skorzystam,(nie próbowałem ale jak da się zrobić co by zmieniało tylko na podświetlenie,a stały kolor komórki był bez zmian) bo raczej próbowałem w tej liście produktów po lewej od razu przypisać konkretne kolory do firmy (ok 30), gdzie po prawej pozycje też będą "firmowo" kolorowane, a podświetlenie będzie takim dodatkowym informatorem gdzie leży :)

0

A jednak nie jest idealnie :< ponieważ jak wcześniej zdefiniuję kolor tabelki w magazynie która ma się podświetlać, to nie działa, nie zamienia na inny kolor. A właśnie ten magazyn miał być "kolorowy" firmowo, a nie cały na biało i np widoczne tylko obramowanie komórek :/
Próbowałem dać w divie obrazek i na niego nałożyć czystą tabele i o identycznych wymiarach, ale edycja tego, jeżeli się zmieni położenie produktu jeszcze trudniejsza :/
http://jsbin.com/efezop/4/edit

0

A jednak nie jest idealnie :< ponieważ jak wcześniej zdefiniuję kolor tabelki w magazynie która ma się podświetlać, to nie działa, nie zamienia na inny kolor

Bo znając życie regułka z kolorem jest ważniejsza niż podświetlenia, to problem CSS, nie skryptu. Robisz coś takiego pewnie:

#lista tr td { background: green; }
.podswietlony { background: red; }

Regułki w CSS mają swoje priorytety. Ta u góry ponieważ jest wybierana po ID oraz nazwie tagu - będzie ważniejsza od tej na dole (tylko klasa). Czyli taki kod:

<table id="lista">
  <tr>
    <td class="podswietlony">test</td>
  </tr>
</table>

Spowoduje w połączeniu z tamtym css, że komórka będzie zielona.

Popraw cssy, albo pokaż kod, który nie działa, bo póki co wkleiłeś coś, co wygląda mi na mój nieruszany skrypt - i będziemy tłumaczyć dalej.

0

Ups, fakt, edytowałem ten skrypt co podesłałeś wcześniej, uprzednio go nie zapisując i nie ma niczego :<
Tą tabelę robię w photoshopie, tam ładnie można ułożyć z widokiem siatki wszystkie miejsca jest tego prawie 400 tak więc sporo do ogarnięcia, testowo wyciąłem kawałek i sprawdzałem jak będzie działać, czy eksportuje do tabelki, czy do divów, wszystko działa super, tylko do momentu aż kombinuje co by te pola pokolorować, jak np dodaje do divu background: green to już nic sie nie podświetla tylko non stop ta zieleń, czy jak np eksportuje z obrazkami, to one też na stałe zostają i nie da się ich zmienić w sensie podświetlić.
Podam jeszcze raz tą podstawke co mi zapodałeś tylko że z tymi kolorkami.
http://jsbin.com/evopaq/1/edit

1

Doucz się CSSa. Przenieś regułkę .podswietlony na sam koniec, tyle

0

O taki myk, znowu wszytko gra, wielkie dzięki, mogę iść spać spokojnie ;<

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