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

Question

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

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

为什么要再次定义函数 colorChange ？

Use querySelectorAll('td [type="checkbox"]:checked') to select checked elements.

试试这个:

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;
  });
}

* {
  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;
}

Fiddle here