Question

我有一个表格，每行都有一个按钮，以及一个复选框。如果选中此复选框，则按钮的颜色应更改。第一行的效果很好-选中复选框后，按钮的颜色会更改，而未选中时，按钮的颜色会变回来。但是，当选中第二行中的复选框时，第一行中的按钮会更改颜色

我已经设法使它适用于一个按钮，但不适用于第二个按钮

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

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

<!DOCTYPE html>
<html>

<body>
  <!-- Create extra space -->
  <p><br><br></p>
  <!-- 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>

我期望的结果是，当选中单个复选框时，只有相应的按钮会更改颜色。

Answer 1

属性id在文档中必须是唯一的，而应使用class。

点击复选框后，您可以根据选中的状态toggle()类，如下所示：

function ChangeRowColor(chkrow) {
  var btn = chkrow.closest('.rowA').querySelector(' .b_echo_01');
  chkrow.parentNode.classList.toggle('cell');
  btn.classList.toggle('green');
  btn.classList.toggle('red');
  chkrow.closest('tr').classList.toggle('gray');
}

table, th, td {
  border: 1px solid black;
}
.green{
  background-color: green;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
}
.red{
  background-color: red;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
}
.gray{
  background-color: gray;
}
.cell{
  background-color: yellow;
}

<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 class="rowA">
      <td  width="20%"><input type="button" class = "red 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  class="cell" width="15%"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'rowA','celA')"/></td>
      <td  width="10%"></td>  
    </tr> 
    <tr class="rowA">
      <td  width="20%"><input type="button" class = "red 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  class="cell" width="15%"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this)"/></td>
      <td  width="10%"></td>  
    </tr> 
  </table>
</div>

Answer 2

我已经演示了一个简单的演示，所以您不会感到困惑。基本上，您可以定义一个CSS类，并在触发复选框更改事件时为按钮切换此类名称

$(".checkbox").change(function(){
  $("#"+$(this).data("target")).toggleClass("change-to-me");
});

#targetButton{
  width: 150px;
  height: 30px;
}

.change-to-me{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input class="checkbox" data-target="targetButton1" type="checkbox">
<button id="targetButton1">My background</button>

<input class="checkbox" data-target="targetButton2" type="checkbox">
<button id="targetButton2">My background</button>

<input class="checkbox" data-target="targetButton3" type="checkbox">
<button id="targetButton3">My background</button>

更新的答案

//  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, btn) {
  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(btn).style.backgroundColor = 'green';
  } else {
    document.getElementById(btn).style.backgroundColor = 'red';
  }
  varrow.style.backgroundColor = varColor;
  varcel.style.backgroundColor = varColor2;
}

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

<!DOCTYPE html>
<html>

<body>
  <!-- Create extra space -->
  <p><br><br></p>
  <!-- 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', 'b_echo_01')"/></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', 'b_echo_02')"/></td>
        <td  width="10%"></td>	
      </tr> 
      </table>
      </div> <!-- Close Div Echo_O02_button --> 
  </body>
</html>

Answer 3

您始终在功能中使用相同的ID按钮。要使其与多个按钮一起使用，还必须传递ID按钮才能起作用。（并调整功能）。像这样：

function ChangeRowColor(chkrow,id, 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(id).style.backgroundColor = 'green';
  } else {
    document.getElementById(id).style.backgroundColor = 'red';
  }
  varrow.style.backgroundColor = varColor;
  varcel.style.backgroundColor = varColor2;
}

然后，在html中传递该ID，例如：

<td  id="celA" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'b_echo_01','rowA','celA')"/></td>

如果选中复选框，相应的按钮应更改颜色

3 个答案: