Question

我正在动态创建HTML表，如下所示：

for(var i=0; i<rowsToAdd ; i++){
    tr = table.insertRow(-1);
    var colsToAddLength = findColsToAddLength();
    for(var j=0; j<colsToAddLength; j++){
       var tabCell = tr.insertCell(-1);
       var colToAdd = findColToAdd();
       tabCell.innerHTML = colToAdd;
    }
}

单击特定单元格后如何更改其颜色？我是Web开发的初学者。

Answer 1

您可以像这样使用它：

    function alternate(id){ 
      if(document.getElementsByTagName){  
        var table = document.getElementById(id);   
        var rows = table.getElementsByTagName("tr");   
        for(i = 0; i < rows.length; i++){           
      //manipulate rows 
          if(i % 2 == 0){ 
            rows[i].className = "even"; 
          }else{ 
            rows[i].className = "odd"; 
          }       
        } 
      } 
    }
    <style> 
      .odd{background-color: white;} 
      .even{background-color: gray;} 
    </style>

 <table id="theTable"> 
    <tr><td>0 - some txt</td></tr> 
    <tr><td>1 - some txt</td></tr> 
      <tr><td>2 - some txt</td></tr> 
      <tr><td>3 - some txt</td></tr> 
      <tr><td>4 - some txt</td></tr>       
    </table>

Answer 2

由于我希望避免在使用CSS做相同事情时遇到太多麻烦的情况下避免使用JS，所以我建议采用以下技巧，但是由于您提供的细节太少，因此我无法完全重现您的情况。可以通过其他CSS类控制颜色。

table {
  border-collapse: collapse;
}

td {
  position: relative;
  border: 1px solid #000000;
  padding: 0;
}

.pseudo-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.cell-content {
  padding: 10px;
}

.pseudo-checkbox:checked + .cell-content {
  background: red;
}

<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="pseudo-checkbox" />
        <div class="cell-content">
          123
        </div>
      </td>
      <td>
        <input type="checkbox" class="pseudo-checkbox" />
        <div class="cell-content">
          123
        </div>
      </td>
      <td>
        <input type="checkbox" class="pseudo-checkbox" />
        <div class="cell-content">
          123
        </div>
      </td>
    </tr>
  </tbody>
</table>

在动态填充的表格中更改列的背景色onClick

2 个答案: