使用 Javascript 和 CSS 为 table 的行上色

Question

我有一个 table，我想使用 Javascript 在点击时为一行着色。

这是我的代码，table 中有三行，javascript 中有两个函数，CSS 文件中有两个函数：

function changeColor() {
  var td = $("#myTable" + " td");
  $.each(td, function(i) {

    if ($(td[i]).html() === 'Cloture') {
      $(td[i]).addClass("green");
    } else if ($(td[i]).html() === 'A faire') {
      $(td[i]).addClass("red");
    } else if ($(td[i]).html() === 'En cours') {
      $(td[i]).addClass("orange");
    }
    else {
      $(td[i]).addClass("white");
    }
  });
}

changeColor();

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

 td{
            text-align: center;
            color: white;
            background: #FFFFFF;
            padding: 10px;
        }

        tr:hover {background-color: #FFE56C;}

        td:last-child {
          border-right: 1px;
        }
        .green {
          background-color: #239e58 !important;
        }
        .red {
          background-color: #ff4e33 !important;
        }
        .orange {
          background-color: #ffd633 !important;
        }

        .white {
          background-color: white !important;
        }

        .table-row {
            cursor: pointer;
            }

        .selected-row {
          background-color: #FFD200 !important;
          color: white;
        }

<html>

    <title>Actions EAVP</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js" integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1++3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO+eFpHk4OCFAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="/static/polls/style.css" />

<div class="container">

    <body style="background-color: white";>

        <section class="content">
            
<div>
</div>
    <br>
<h3 style="color: black;">Liste des actions</h3>

<div style="overflow-x:auto;">

    <table class="list_homepage" id="myTable">
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center"></th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">id</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">titre</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_rendu</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">statut</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_insertion</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_emettrice</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_receptrice</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">owner</th>
        

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/1/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/1/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/1/">Detail</a></td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">1</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-20 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">A faire</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:17:07+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/2/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/2/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/2/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-24 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:18:34+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/5/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/5/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/5/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">5</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-23 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">En cours</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 14:24:29+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>
    </table>

</div>

如您所见，我有另一个运行良好的 javascript 函数，但点击时为行着色的函数不起作用。

如果有人能解决我的问题那就太好了！

Answer 1

您可以通过以下几行代码到达您的对象：

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

.table-row {
  cursor: pointer;
}

.selected-row {
  background-color: #FFD200 !important;
  color: white;
}

<table id="myTable">
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
</table>

您可以使用 table.rows 和传播 ... 来创建所有行的数组，然后只需使用 addEventListener 和 forEach 来分配切换点击 class.

参考：

使用您的新代码段：

function changeColor() {
  var td = $("#myTable" + " td");
  $.each(td, function(i) {

    if ($(td[i]).html() === 'Cloture') {
      $(td[i]).addClass("green");
    } else if ($(td[i]).html() === 'A faire') {
      $(td[i]).addClass("red");
    } else if ($(td[i]).html() === 'En cours') {
      $(td[i]).addClass("orange");
    }
  });
}

changeColor();

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

td {
  text-align: center;
  color: white;
  padding: 10px;
}

tr:hover {
  background-color: #FFE56C;
}

td:last-child {
  border-right: 1px;
}

.green {
  background-color: #239e58 !important;
}

.red {
  background-color: #ff4e33 !important;
}

.orange {
  background-color: #ffd633 !important;
}

.white {
  background-color: white !important;
}

.table-row {
  cursor: pointer;
}

.selected-row {
  background-color: #FFD200 !important;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <body style="background-color: white" ;>

    <section class="content">

      <div>
      </div>
      <br>
      <h3 style="color: black;">Liste des actions</h3>

      <div style="overflow-x:auto;">

        <table class="list_homepage" id="myTable">
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center"></th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">id</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">titre</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_rendu</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">statut</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_insertion</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_emettrice</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_receptrice</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">owner</th>



          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/1/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/1/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/1/">Detail</a></td>


            <td style="color: black; text-align: center; border-bottom: 1px solid black;">1</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-20 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">A faire</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:17:07+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>


          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/2/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/2/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/2/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-24 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:18:34+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>


          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/5/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/5/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/5/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">5</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-23 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">En cours</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 14:24:29+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>
        </table>

      </div>

你有两个问题：

在您的 jquery 代码中添加 class 白色，但是如果您为所有列着色，您将看不到行的背景（所以我删除了它）
class css td 的情况相同，背景为白色。

使用 Javascript 和 CSS 为 table 的行上色

Color table's row on click using Javascript and CSS

html

javascript

css

onclick