Zmienianie koloru wierszy tabeli

Question

Cześć, dostałem zadanie między innymi pobrać dane z bazy i wyświetlić je w formie tabeli. Nie potrafię jednak sobie poradzić z drugą częścią zadania - użytkownik wybiera dwa dowolne kolory a tabela koloruje wiersze tymi kolorami na zmianę (poziomo). Pierwszy raz mam styczność z JS i nie mam na to pomysłu. Próbowałem ugrać coś w taki sposób:

let colorInput = document.querySelector('#color');
colorInput.addEventListener('input', () =>{
    let color = colorInput.value;
    //document.body.style.backgroundColor = color;
    //document.querySelector('table').style.backgroundColor = color;
    document.querySelector('tr:nth-child(even)').style.color = color;
});

Będę wdzięczny za wskasówki

Answer 1

Byłeś blisko, nie brałeś pod uwagę, że tych wierszy będzie więcej niż jeden z każdego typu, więc bardziej zasadne jest użycie document.querySelectorAll(...) i iteracja po tych "zwróconych" elementach.

 

Przykład

<div class="colors-picker">
  <div>
    <label for="color_even">Color for even rows</label>
    <input type="color" id="color_even" value="#dddddd" />
  </div>
  <div>
    <label for="color_odd">Color for odd rows</label>
    <input type="color" id="color_odd" value="#999999" />
  </div>
</div>

<table>
  <thead>
    <tr>
      <th>Head title 1</th>
      <th>Head title 2</th>
      <th>Head title 3</th>        
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum 1.1</td>
      <td>Lorem ipsum 1.2</td>
      <td>Lorem ipsum 1.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 2.1</td>
      <td>Lorem ipsum 2.2</td>
      <td>Lorem ipsum 2.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 3.1</td>
      <td>Lorem ipsum 3.2</td>
      <td>Lorem ipsum 3.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 4.1</td>
      <td>Lorem ipsum 4.2</td>
      <td>Lorem ipsum 4.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 5.1</td>
      <td>Lorem ipsum 5.2</td>
      <td>Lorem ipsum 5.3</td>
    </tr>    
  </tbody>
</table>

.colors-picker {
  margin: 1em 0;
}
.colors-picker div {
  margin: 0.5em 0;
}
.colors-picker label {
  display: inline-block;
  width: 12em;
  text-align: right;
  font: 700 0.9em monospace;
}
table {
  min-width: 500px;
  width: 50vw;
}
thead tr {
  background-color: black;
  color: white;  
}
thead th {
  padding: 0.2em;
  text-align: center;
}
tbody td {
  padding: 0.3em;
}

window.onload = pageLoaded;

function pageLoaded() {
  const input_colors_picker = document.querySelectorAll('input[type="color"]');

  input_colors_picker.forEach((input_color) => {
    input_color.addEventListener('input', setRowBackgroundColor);
  });

  
  // Wywołanie ustawień domyślnych - zaraz po załadowaniu kodu html
  // nie wymagane, możesz usunąć - przez zasymulowanie zdarzenia 'input'
  // <input type="color" id="color_even" value="#dddddd" />
  input_colors_picker[0].dispatchEvent(new Event('input', null));
  // <input type="color" id="color_odd" value="#999999" />
  input_colors_picker[1].dispatchEvent(new Event('input', null));
}

function setRowBackgroundColor(e) {
  const type_row = (e.target.id === 'color_even') ? 'even' : 'odd';
  const tr_rows = document.querySelectorAll(`tbody tr:nth-child(${type_row})`);
  tr_rows.forEach((tr_row) => {
    tr_row.style.backgroundColor = e.target.value;
  });  
}

 

 

[ How to trigger event in JavaScript? ]  [ Interpolacja ]

Comments

Możesz też uzyskać efekt "kolorowania" wierszy przez użycie zmiennych css jak już wspomniał @radek024.

 

Przykład

<div class="colors-picker">
  <div>
    <label for="color_even">Color for even rows</label>
    <input type="color" id="color_even" value="#dddddd" />
  </div>
  <div>
    <label for="color_odd">Color for odd rows</label>
    <input type="color" id="color_odd" value="#999999" />
  </div>
</div>

<table>
  <thead>
    <tr>
      <th>Head title 1</th>
      <th>Head title 2</th>
      <th>Head title 3</th>        
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum 1.1</td>
      <td>Lorem ipsum 1.2</td>
      <td>Lorem ipsum 1.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 2.1</td>
      <td>Lorem ipsum 2.2</td>
      <td>Lorem ipsum 2.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 3.1</td>
      <td>Lorem ipsum 3.2</td>
      <td>Lorem ipsum 3.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 4.1</td>
      <td>Lorem ipsum 4.2</td>
      <td>Lorem ipsum 4.3</td>
    </tr>
    <tr>
      <td>Lorem ipsum 5.1</td>
      <td>Lorem ipsum 5.2</td>
      <td>Lorem ipsum 5.3</td>
    </tr>    
  </tbody>
</table>

:root {
  --color-rows-even: #dddddd;
   --color-rows-odd: #999999;
}
.colors-picker {
  margin: 1em 0;
}
.colors-picker div {
  margin: 0.5em 0;
}
.colors-picker label {
  display: inline-block;
  width: 12em;
  text-align: right;
  font: 700 0.9em monospace;
}
table {
  min-width: 500px;
  width: 50vw;
}
thead tr {
  background-color: black;
  color: white;  
}
thead th {
  padding: 0.2em;
  text-align: center;
}
tbody tr:nth-child(even) {
  background-color: var(--color-rows-even);
}
tbody tr:nth-child(odd) {
  background-color: var(--color-rows-odd);
}
tbody td {
  padding: 0.3em;
}

window.onload = pageLoaded;
 
function pageLoaded() {
  const input_colors_picker = document.querySelectorAll('input[type="color"]');
  for (const input_color of input_colors_picker) 
    input_color.addEventListener('input', setRowBackgroundColor);
}
 
function setRowBackgroundColor({target}) {
  const root = document.documentElement;
  //                          <input type="color" id="color_..."            value="..." />
  root.style.setProperty('--color-rows-' + target.id.replace('color_', ''), target.value);
  // console.clear();
  // console.log('--color-rows-' + target.id.replace('color_', '') + ': ' + target.value);
}

 

Answer 2

Najwygodniej byłoby to ogarnąć za pomocą zmiennych w CSS. Na podstawie color pickera zmieniasz wartość zmiennej w CSS, która jest ustawiona jako tło dla odpowiedniego określenia tabeli.

Comments

Brzmi jak plan, czyli wysyłam inputa z kolorem do CSS i tam mogę zrobić jakiegoś ifa?

---

Niee, po prostu za pomocą JS ustawiasz wartość zmiennej w CSS.

 

Tutaj masz przykład jak to zrobić: https://davidwalsh.name/css-variables-javascript