Heb een tabel met in iedere rij een button en een checkbox
de bedoeling is als een checkbox geselecteerd wordt dat kleur van achtergrond van rij en kleur en van button veranderd en als checkmark niet geselecteerd wordt dat de originele kleur weer terugkomt.
het veranderen van de kleur van de button in rij 1 lukt maar niet van rij 2.
Dit moet onafhankelijk van elkaar werken.
uitgangspositie
selectie checkbox regel 1, dan button regel 1groen en achtergrond grijs
selectie checkbox regel 2, dan button REGEL 1 groene ne achtergrond regel 2 grijs
Dit is code tot zover
de bedoeling is als een checkbox geselecteerd wordt dat kleur van achtergrond van rij en kleur en van button veranderd en als checkmark niet geselecteerd wordt dat de originele kleur weer terugkomt.
het veranderen van de kleur van de button in rij 1 lukt maar niet van rij 2.
Dit moet onafhankelijk van elkaar werken.
uitgangspositie selectie checkbox regel 1, dan button regel 1groen en achtergrond grijs selectie checkbox regel 2, dan button REGEL 1 groene ne achtergrond regel 2 grijsDit is code tot zover
Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
button {
height:40px;
width:160px;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 12px 15px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
button.green,input.green {
background: green;
}
.buttonsmall{
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:white;
}
.buttonsmall:hover {
background-color: green;
}
</style>
</head>
<body >
<!-- Create extra space -->
<p><br><br></p>
<script type="text/javascript">
// If checkbox is checked equipment is NOT in run, then background row equipment change to grey and Color button from red to green-->
function ChangeRowColor(chkrow,row,cel) {
var varrow = document.getElementById(row);
var varcel = document.getElementById(cel);
var varColor = "#E3CEF6";
var varColor2 = "Yellow";
if (chkrow.checked == true) {
varColor = "Grey";
varColor2="Grey";
document.getElementById("b_echo_01").style.backgroundColor='green';
}
else{
document.getElementById("b_echo_01").style.backgroundColor='red';
}
varrow.style.backgroundColor = varColor;
varcel.style.backgroundColor = varColor2;
}
</script>
<!-- Create extra space -->
<p><br></p>
<div id="Echo_O01_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr id="rowA">
<td width="20%"><input type="button" id = "b_echo_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O01')">
</td>
<td width="40%"><b>Echo555_O01</></td>
<td width="15%"></td>
<td id="celA" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'rowA','celA')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O01_button -->
<!-- <p><br></p> -->
<div id="Echo_O02_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr id="rowB">
<td width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')">
</td>
<td width="40%"><b>Echo555_O02</></td>
<td width="15%"></td>
<td id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O02_button -->
</body>
</html>
Laatst bewerkt:
