如果在同一个单元格中，如何使按钮成对工作，以及将每个按钮识别为单独的脚本？答案

【问题标题】：How to make buttons work in pair if in the same cell, and the script to recognize every button as individual?如果在同一个单元格中，如何使按钮成对工作，以及将每个按钮识别为单独的脚本？
【发布时间】：2016-09-09 14:30:20
【问题描述】：

      function functionAdd() {
 
/* **> here I add cells and rows to the table** */

            var table = document.getElementById("id");
            var row = table.insertRow(1);
            var cell = row.insertCell(0);
            var cell1 = row.insertCell(1);
            var cell2 = row.insertCell(2);
            var cell3 = row.insertCell(3);
             cell.innerHTML = "New function";
             cell1.innerHTML = "<div class='row'>"+
              " <button type='button' id='on'>ON</button>"+
              " <button type='button' id='off'>OFF</button>"+
              "</div>";
              cell1.style.width = '100px';
             cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
             cell3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='deleteIcon.png' style = 'width: 20px; height:20px;'>"
    

/* **>      there is the condition for buttons** */

    document.getElementById('on').disabled = false;
    document.getElementById('off').disabled = false;
        //on click changes on/off to green
        document.getElementById('on').onclick = function(){
          this.disabled = true;
          document.getElementById('off').disabled = false;
          if (this.disabled == false) {
            document.getElementById('off').disabled = true;
          }else if (this.disabled == true) {
            document.getElementById('off').disabled = false;
          }
          cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
        }
        //on click changes on/off to red
        document.getElementById('off').onclick = function(){
          this.disabled = true;
          document.getElementById('on').disabled = false;
          cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='redPoint.png' style = 'width: 10px; height:10px;'>"
        }
    
    }

table
{
    margin: 0 auto;
    width:350px;
    height:100px;
}
.row
{
    text-align: center;
}

.log{
  margin: 200px 455px;
  background-color: #2980b9;
  border-radius: 4px;
}

.input{
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 35px;
}

input{
  margin-top: 10px;
margin-left: 20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div id="vizibilitate">
    <input type="button" value="Add" onclick="functionAdd()">
      <table id="id" style="border:1px solid black; border-radius: 3px;">
          <tr>
              <th>denumirea</th>
                  <th>statut</th>
                  <th>on/off</th>
                  <th >delete</th>
              </tr>
              <tr>
                </tr>
          </table>
      </div>
    </body>

</html>

这就是它的样子]：

我只能在第一行更改开和关，但其他行禁用按钮。

【问题讨论】：

标签： javascript html html-table dom-events

【解决方案1】：

我找到了解决方案.. 花了一段时间原来如此

</head>
<body>

<script type="text/javascript">
var contor=0;
    function functionAdd() {
        var index=contor;
        var table = document.getElementById("id");
        var row = table.insertRow(1);
        var cell = row.insertCell(0);
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
         cell.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;New function";
         cell1.innerHTML = "<div class='row'>"+
          " <button type='button' id='on"+index+"'>ON</button>"+
          " <button type='button' id='off"+index+"'>OFF</button>"+
          "</div>";
         cell1.style.width = '100px';
         cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
         cell3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='deleteIcon.png' style = 'width: 20px; height:20px;'>"

    document.getElementById("on"+index).disabled = true;
    document.getElementById("off"+index).disabled = false;
    //La click se schimba indicatorul on/off la verde
    document.getElementById("on"+index).onclick =function(){ generatorOn(index, cell2);};
    //La click se schimba indicatorul on/off la rosu
    document.getElementById("off"+index).onclick =function(){ generatorOff(index, cell2);};
    contor++;
    //console.log(contor);
}
function generatorOn(rowNumber, cell2){
  cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>";
  document.getElementById("on"+rowNumber).disabled = true;
  document.getElementById("off"+rowNumber).disabled = false;
}
function generatorOff(rowNumber, cell2){
  cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='redPoint.png' style = 'width: 10px; height:10px;'>";
  document.getElementById("on"+rowNumber).disabled = false;
  document.getElementById("off"+rowNumber).disabled = true;
}
function generatorOff(rowNumber, cell3){
  cell3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='deleteIcon.png' style = 'width: 20px; height:20px;'>";

}

</script>

  <div id="vizibilitate">
    <input type="button" value="Add function" onclick="functionAdd()" style="border-radius: 5px; margin-left: 500px; width:350px; height: 30px;">
      <table id="id" style="border: 1px solid black; border-radius: 3px;">
          <tr>
              <th>denumirea</th>
              <th>statut</th>
              <th>on/off</th>
              <th >delete</th>
          </tr>
          <tr>
            </tr>
      </table>
  </div>

</body>
</html>

希望它对与我有同样问题的其他人有用..享受！

【讨论】：