同じセル内にあれば、ボタンをペアで動作させる方法と、すべてのボタンを個別に認識するスクリプトはありますか？

 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>

[これは ][1]

のように私はオンとオフのための最初の行のみに変更を加えることができますが、他の行は、私は解決策を持って無効ボタン

出典

2016-05-13 Daniel

を持ってどのように見えるかです。..それは

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

はそれがme..enjoと同じ問題を抱えていた他人のために有用であった期待しているので、そこにしばらくを取りましたy！

出典

2016-05-23 12:00:39 Daniel

同じセル内にあれば、ボタンをペアで動作させる方法と、すべてのボタンを個別に認識するスクリプトはありますか？

答えて

関連する問題