Kolorowanie parzystych/nieparzystych wierszy w tabeli

0

Cześć, mam problem z kolorowaniem naprzemiennie wierszy w tabeli (kolor wybieramy za pomocą colorpickera). Kod, który mam, zmienia tło strony po wybraniu odpowiedniego koloru z palety :
<input type="color" id="colorInputColor" />
<input type="button" id="colorButton" value="Click to Change Color" onclick="changeColor()" />
</div>
</div>
<script>
function changeColor() {
let color = document.getElementById("colorInputColor").value;
document.body.style.backgroundColor = color;
}
</script>

Nie mogę niestety zrobić tego dla wierszy w tabeli, jakieś podpowiedzi ?

2 
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

https://www.w3.org/Style/Examples/007/evenodd.pl.html

A jeśli musisz to zrobić dynamicznie, to przyjdzie ci modyfikować JS-em zawartość akrusza styli.
Albo latać pętlą po wszystkich tabelach ale to akurat mało wygodne.

0

@Freja Draco: Trzeba to robić dynamicznie, Twoje rozwiązanie jest mi oczywiście znane. Udało mi się kolorować poszczególny wiersz za pomocą ID :

<input type="color" id="colorInputColor" /> <input type="button" id="colorButton" value="Click to Change Color" onclick="changeColor()" /> </div> </div> <script> function changeColor() { let color = document.getElementById("colorInputColor").value; document.getElementById("odd").style.backgroundColor = color; } </script> Jednak działa to tylko dla jednego "ID", próbowałem to robić z Document.getElementsByClassName() jednak nic z tego. Jakiś pomysł ?
0

No to zrób coś w tym stylu:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
  tr:nth-child(even) {background: #CCC}
  tr:nth-child(odd)  {background: #FFF}
</style>
</head>
<body>

<table><tbody>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
</tbody></table>

<script>
function modyfikuj_css() {
  var o_head  = document.getElementsByTagName("head")[0];
  var o_css   = document.createElement("style");
  o_css.type  = "text/css";
  o_css_tnode = document.createTextNode("");
  o_head.appendChild(o_css);
  o_css.appendChild(o_css_tnode);
  o_css_tnode.nodeValue = `
    tr:nth-child(even) {background: red;}
    tr:nth-child(odd)  {background: green;}
  `;
}
modyfikuj_css();

</script>
</body>
</html>
0

@Freja Draco: Chodzi o to, że kolor ma być wybierany dynamicznie za pomocą kolor pickera, tzn. wybieramy kolor z palety i po kliknięciu przycisku nieparzyste wiersze w tabeli zmieniają kolor na wcześniej wybrany (nie przypisany statycznie) :

 <input type="color" id="colorInputColor" />
        <input
          type="button"
          id="colorButton"
          value="Click to Change Color"
          onclick="changeColor()"
        />
      </div>
    </div>
    <script>
      function changeColor() {
        let color = document.getElementById("colorInputColor").value;
        document.getElementById("odd").style.backgroundColor = color;
      }
    </script>

Próbowałem to zrobić z getElementsByClassName, jednak zaznacza również tylko pierwszy wiersz o podanej klasie.

0
Kuba Sobczak napisał(a):

@Freja Draco: Chodzi o to, że kolor ma być wybierany dynamicznie za pomocą kolor pickera, tzn. wybieramy kolor z palety i po kliknięciu przycisku nieparzyste wiersze w tabeli zmieniają kolor na wcześniej wybrany (nie przypisany statycznie)

Ale wiesz, że funkcje mogą mieć parametry?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
  tr:nth-child(even) {background: #CCC}
  tr:nth-child(odd)  {background: #FFF}
</style>
</head>
<body>

<table><tbody>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
  <tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>
</tbody></table>

<script>
function zrob_css() {
  var o_head  = document.getElementsByTagName("head")[0];
  var o_css   = document.createElement("style");
  o_css.type  = "text/css";
  o_css_tnode = document.createTextNode("");
  o_head.appendChild(o_css);
  o_css.appendChild(o_css_tnode);
}

function modyfikuj_css(k1, k2) {
  o_css_tnode.nodeValue = `
    tr:nth-child(even) {background: `+k1+`;}
    tr:nth-child(odd)  {background: `+k2+`;}
  `;
}

zrob_css();
modyfikuj_css("red", "green");

</script>
</body>
</html>

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