Изменение цвета фона при нажатии на столбец в динамически заполненной таблице

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

Как я могу изменить цвет конкретной ячейки после ее нажатия? Я новичок в веб-разработке.

javascript,html,

-1

Ответов: 2

JavaScript, HTML,

Похожие вопросы

score 0 · Accepted Answer

0

Вы можете использовать его следующим образом:

    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>

score 0 · Accepted Answer

0

Поскольку мне нравится избегать JS, когда это не слишком сложно делать с CSS, я бы предложил ниже трюк, однако я не могу полностью воспроизвести ваше дело, поскольку вы предоставили слишком мало деталей. Цвета можно контролировать с помощью дополнительных классов 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>