Блог

Главная - Вопросы по программированию - Как я могу использовать javascript для изменения цвета строки в таблице относительно ввода в данные таблицы?

Как я могу использовать javascript для изменения цвета строки в таблице относительно ввода в данные таблицы?

#javascript #css #if-statement #html-table

#javascript #css #if-оператор #html-таблица

Вопрос:

Возможно, использование скрипта — это длинный и неправильный вариант.

Но я создаю таблицу игроков в футбольных командах. Я хочу, чтобы каждая «позиция» в таблице имела разный цветной фон. Я мог бы, конечно, вместо скрипта назначить другой идентификатор / класс и поместить в строку таблицы для каждой позиции одну за другой.

Так, например, скажем, я хочу, чтобы у всех полузащитников был красный фон, а у всех защитников синий фон.

Пример таблицы…

     <table>
      <tr>
        <th>Name</th>
        <th>Club</th>
        <th>Position</th>
        <th>Height</th>
        <th>Weight</th>
      </tr>
      <tr class="defenders">
        <td>Pique</td>
        <td>Barcelona</td>
        <td>Defender</td>
        <td>190cm</td>
        <td>85kg</td>
      </tr>
      <tr class="midfielders">
        <td>Busquets</td>
        <td>Barcelona</td>
        <td>Midfielder</td>
        <td>195cm</td>
        <td>85kg</td>
      </tr>
    </table>

Итак, в таблице у нас есть защитник и полузащитник. Я бы хотел, чтобы у них были разные цветные фоны.

Я думал, что функция javascript «if» может работать.

Как в

если td — полузащитник, фон tr будет красным, если td — защитник, фон tr будет синим.

Есть ли простой способ сделать это и каким будет код?

Или лучше просто использовать класс в самом tr?

Спасибо.

Комментарии:

1. вы можете сделать это с помощью css .midfielders td{ }

2. Спасибо, но я искал ярлык вместо того, чтобы каждый раз вводить класс. При этом просто набрав позицию, например. Полузащитник, в <td></td> скрипт будет знать, чтобы сделать все <td> в этой строке определенного цвета … может быть, чтобы усложнить задачу для простой вещи?

Ответ №1:

не уверен, что ваш реальный случай выглядит точно так же, но здесь у вас есть возможный обходной путь без редактирования html.

 document.addEventListener("DOMContentLoaded", function(event) { 
    const [,...rows] = document.getElementsByTagName("tr") // take all rows but first 

    for (row of rows) {
       // for each row get the third column content 
      let position = row.getElementsByTagName("td")[2].textContent
      
      // add style depending on the text content
      switch (position) {
        case "Defender":
          row.classList.add("defenders")
          break;
        case "Midfielder":
          row.classList.add("midfielders")
          break;
      }


    }
}); 
 .defenders {
  background-color: #7972b7;
}

.midfielders{
  background-color: #d68383;
} 
 <table>
  <tr>
    <th>Name</th>
    <th>Club</th>
    <th>Position</th>
    <th>Height</th>
    <th>Weight</th>
  </tr>
  <tr>
    <td>Pique</td>
    <td>Barcelona</td>
    <td>Defender</td>
    <td>190cm</td>
    <td>85kg</td>
  </tr>
  <tr>
    <td>Busquets</td>
    <td>Barcelona</td>
    <td>Midfielder</td>
    <td>195cm</td>
    <td>85kg</td>
  </tr>
</table>