Tabelka HTML, zaznaczanie wierszy

1

Jest sobie HTML table, budowana po server-side.

Jak w minimalistyczny sposób - tzn bez żadnego z "dużych" frameworków Javascriptowych - zaznaczyć jako "aktywne" wiersze 3-11, 17 oraz 25, w celu przekazania do server-side dla wykonania jakiś operacji ?

Jest na to jakiś wzorzec np w jQuery ?

W pełni rozumiem, że produkowana tabelka będzie musiała mieć jakiś dodatki by to osiągnąć, nie ma z tym problemu, można coś zmodyfikować.

*(nie będę wchodził, dlaczego w tym wieku server-side, powody są istotne)
*

2

No ale skoro może być "faja" to w czym jest problem?

W pierwszej (albo drugiej - pierwsza to LP) kolumnie dajesz checkboxa, każdemu nadajesz unikalne ID.
Potem, w obsłudze przycisku wysyłania dajesz jakiś skrypt JS, który sprawdza, które wiersze mają postawionego ptaka i dla nich odczytuje wartość i przesyła do serwera.

Sam odczytywanie wartości tabeli (zakładam, że chodzi o <table><tr>... w HTML) masz podane chociażby tutaj:
https://stackoverflow.com/questions/3248869/how-do-i-get-data-from-a-table
https://www.encodedna.com/javascript/how-to-read-data-from-html-table-using-javascript.htm

zaznaczanie jak na desktopie, ze zmianą koloru

Nic nie stoi na przeszkodzie, żeby przechwycić zdarzenie kliknięcia checkboxa i w odpowiedzi na to zdarzenie pokolorować wybrany wiersz.

Masz z grubsza podane, jak ja bym to ugryzł. Jeśli coś Ci nie pasuje, to napisz konkretnie w czym problem.

3

Raczej łatwo takie coś zaklepać bez frameworków.

table.querySelectorAll('tr').forEach(element => {
  element.addEventListener('click', () => element.classList.toggle('selected'));
});

A potem przy wysyłaniu sprawdzać klasy. Jakieś dodatkowe informacje możesz dołączyć przez data attribute.

0
szatkus napisał(a):

Raczej łatwo takie coś zaklepać bez frameworków.

table.querySelectorAll('tr').forEach(element => {
  element.addEventListener('click', () => element.classList.toggle('selected'));
});

A potem przy wysyłaniu sprawdzać klasy. Jakieś dodatkowe informacje możesz dołączyć przez data attribute.

Kumam, że to prowadzi do zaspokojenia wizualnej strony w oparciu o klasę CSS "selected", OK.

A jak to przekazać na server-side, nad tabelką button "Operacja 1" (nie będący klasycznym Submit - jestem otwarty na szczegóły), który klikamy ?

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