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

How to change the background color of the selected rows based on the dropdown

本文关键字：背景色 何根 下拉列表      更新时间：2023-09-26

我需要根据下拉菜单更改行的背景色。当我选择表中的复选框并在下拉列表中选择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";
    }
  }

Js出价

为什么要再次定义function colorChange？

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

试试这个：

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

相关文章：