当前位置： 文江博客 话题详情

颜色表的行，使用JavaScript和CSS单击单击

发布于 2025-01-29 12:39:33 字数 9618 浏览 0 评论 0 原文

我有一张桌子，想在使用JavaScript点击时对一行着色。

这是我的代码，表中有三行，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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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函数，但是点击上色的功能无法正常工作。

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

原文

I have a table and I would like to color a row on click using Javascript.

Here is my code, there are three rows in the table, two functions in javascript and one CSS file :

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

As you can see I have another javascript function that works well, but the function to color rows on click doesn't work.

If someone has a solution to my problem that would be great !

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

梦亿 2025-02-05 12:39:33

您可以使用几行，例如：

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 与dread ... 一起创建所有行的数组，然后只需使用 addeventListener 与 foreach 代码>用于分配切换单击类。

参考：

  • htmltablelement.Rows.Rows.Row
  • “ rel =“ nofollow noreferrer”> spread syntax（...）
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/operators/spread_syntax ：//developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/aray/forach/foreach“ rel =“ nofollow noreforrer”> array.prototype.foreach（）
  • “ rel =” nofollow noreferrer“> eventtarget.addeventlistlistlistener（）
  • https://develveper.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener .mozilla.org/en-us/docs/web/api/domtokenlist/toggle“ rel =“ nofollow noreferrer”> domtokenlist.toggle（）

使用您的新snippet：

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代码中，您会添加白色类，但是如果您为所有列上色，您将看不到行的背景（因此我删除了它）
  • ，对于带有背景白色的CSS TD类别的情况。

You can reach your object with few lines like:

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>

You can use table.rows with spread ... for create an array of all rows then just use addEventListener with forEach for assign a toggle click class.

Reference:

with your new snippet:

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>

You have two problem:

  • In your jquery code you add class white, but if you color all column you will not see background of row (so i deleted it)
  • And same situation for class css td with background white.
回复 原文
~没有更多了~

关于作者

凹づ凸ル

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文