stackoom
  简体   繁体   中英

Color table's row on click using Javascript and CSS

 原文  2022-05-17 09:54:46  3   1    javascript/ html/ css/ onclick

Question

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/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>

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 !

1 answers

solution1
 2 ACCPTED  2022-05-17 10:15:30

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 am </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 am </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 am </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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Onclient click how to Change table's BG color using Javascript Change the color of a table's cell on mouse click using Javascript javascript toggle table row background color on click HTML/CSS/JavaScript: How to change color of table row based on data Update element's CSS on click using JavaScript Highlight the row of a table on mouseover using Javascript and CSS Expanding table row using javascript or CSS unable to change button color on click using javascript in materialize.css Disable radio button and change the color when click using javascript or css Toggle row color red and table color white on click with pure javascript (no jquery)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM