如何根据下拉列表更改所选行的背景颜色

Question

我需要根据下拉列表更改行的背景颜色。当我选择表格中的复选框并在下拉列表中选择bg颜色需要更改的颜色时，我在下拉中有一些颜色。

function changeColor() { 
  var check = document.getElementById('checkBox').checked;
  function colorChange() {
    if (value = red) {
        check.parentNode.style.background = "red";
    }
    if (value = yellow) {
        check.parentNode.style.background = "yellow";
    }
    if (value = green) {
        check.parentNode.style.background = "green";
    }
  }

JsFiddle

Answer 1

为什么要再次定义function colorChange？

  

使用querySelectorAll('td [type="checkbox"]:checked')选择checked元素。

试试这个：

＆＃13;

＆＃13;

var obj = [{
  Firstname: "Bob",
  Lastname: "Mayer",
  Email: "bob@mayer.com",
  Number: "123456789"
}, {
  Firstname: "Steven",
  Lastname: "Spil",
  Email: "steven@spill.com",
  Number: "987654321"
}, {
  Firstname: "Paul",
  Lastname: "Taucker",
  Email: "paul@tack.com",
  Number: "578954321"
}, {
  Firstname: "computer",
  Lastname: "Tech",
  Email: "comp@tech.com",
  Number: "418741876"
}, {
  Firstname: "User",
  Lastname: "Interface",
  Email: "user@inter.in",
  Number: "949796928"
}];

var table = document.createElement('table');
table.id = "table";

var headcell = document.createElement('th');
var cell = document.createElement('td');
var input = document.createElement('input');
var tableContainer = document.createElement('div');
document.body.appendChild(tableContainer);

function createTable() {

  tableContainer.appendChild(table);
  var row = document.createElement('tr');
  table.appendChild(row);

  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Select";

  headcell = document.createElement('th');
  row.appendChild(headcell);
  headcell.innerHTML = "Sl. NO";

  Object.keys(obj[0]).forEach(function(val) {
    headcell = document.createElement('th');
    row.appendChild(headcell);
    headcell.innerHTML = val;
  });

  for (var i = 0; i < obj.length; i++) {

    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.id = "checkBox";
    checkbox.onclick = changeColor;

    var row = document.createElement("tr");
    table.appendChild(row);

    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.appendChild(checkbox);

    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = i;

    for (key in obj[i]) {
      var cell = document.createElement("td");
      row.appendChild(cell);
      cell.innerHTML = obj[i][key];
    }

  }
  return true;
}
createTable();

var selectDiv = document.createElement('div');
tableContainer.appendChild(selectDiv);

var select = document.createElement('select');
selectDiv.appendChild(select);
select.onchange = colorChange;
select.id = "selectElement";

var none = document.createElement('option');
none.innerHTML = "None";
none.value = "none";
select.appendChild(none);
var red = document.createElement('option');
red.innerHTML = "Red";
red.value = "red";
select.appendChild(red);
var yellow = document.createElement('option');
yellow.innerHTML = "Yellow";
yellow.value = "yellow";
select.appendChild(yellow);
var green = document.createElement('option');
green.innerHTML = "Green";
green.value = "green";
select.appendChild(green);

function changeColor(e) {
  var checked = e.target.checked;
  var color = document.getElementById('selectElement').value;
  if (checked) {
    e.target.parentNode.parentNode.style.background = color;
  } else {
    e.target.parentNode.parentNode.style.background = "";
  }
}

function colorChange() {
  var color = this.value;
  var elems = document.querySelectorAll('td [type="checkbox"]:checked');
  [].forEach.call(elems, function(elem) {
    elem.parentNode.parentNode.style.background = color;
  });
}

＆＃13;

* {
  font-family: 'verdana';
}
table {
  margin-bottom: 15px;
}
input {
  margin: 5px;
}
th,
td {
  border: 1px solid #ccc;
  font: 13px'verdana';
  padding: 5px;
}
th {
  font-weight: bold
}
table [type="text"],
table [type="email"],
table [type="number"] {
  display: block;
  width: 90px;
}
[value="Delete"] {
  display: block;
}

＆＃13;

＆＃13;

＆＃13;

Fiddle here