How do i change table zebra pattern colors using <input type='color'/>-CodePudding

I created two color picker to change table colors in html using input, but i don't know how to change those colors based off what user picks in color picker. I really, really don't want to use jquery and i prefer it to be really simple. Also if it's needed you can find that site under: <www.kubera.cba.pl>

CodePudding user response：

You can use a css variable and change the variable with JavaScript when the color is selected.

const root = document.querySelector(':root');

function setColor (property, value) {
  root.style.setProperty(property, value);
}

document.querySelectorAll("[data-row]").forEach( function(elem) {
  elem.addEventListener("input", function(){
    setColor(elem.dataset.row, elem.value);
  });
});

:root {
  --odd: #CCCC33;
  --even: #EE33CC; 
}

tr:nth-child(even) {
  background-color: var(--even);
}

tr:nth-child(odd) {
  background-color: var(--odd);
}

<table>
<tbody>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
</tbody>
</table>

<label for="odd"><input type="color" id="odd" data-row="--odd" value="#CCCC33"/>

<label for="even"><input type="color" id="even" data-row="--even" value="#EE33CC" />

CodePudding user response：

On your input color, put a change event where you can get the new color with "this.value". Now apply the value to the element.

<input onchange="document.getElementById('yourTable').style.backgroundColor = this.value" type='color'/>