ドロップダウンに基づいて選択した行の背景色を変更する方法

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要素を選択します。

これを試してみてください：

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