Coloring table rows

Question

There is a table of the form

<table class="spc" border="0" cellspacing="0" cellpadding="2" width="98%"> <col width="5%"> <col width="5%"> <col width="10%"> <col width="25%"> <col width="12%"> <col width="15%"> <col width="20%"> <col width="15%"> <tr class="thd "> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку"><input type="checkbox" id="all"></td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">id</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Имя</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Логин</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Телефон</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Почта</td> <td class="thd " onclick="sort(this)"title="Нажмите на заголовок, чтобы отсортировать колонку">Активность</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Статус</td> </tr> <?php foreach ($articles as $data): ?> <tr id="<?=$data['outlookcontacts_id']?>" class="row"> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <input type="checkbox" class="row-select"></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['outlookcontacts_id']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['Title']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['Middle_Name']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['Last_Name']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['Company']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['E-mail_Address']?></td> <td class="under_cell <?=$data['outlookcontacts_id']?>"> <?=$data['Web_Page']?></td> </tr> <?php endforeach;?> </table> <script type="text/javascript" src="http:/js/table.js"></script> <script type="text/javascript" src="http:/js/modal.js"></script> <script> $(document).ready(function($) { $('.row').click(function(event) { this.style.background='#fffdb5'; if ($(this).find('.row-select').is(":checked")) {$(this).find('.row-select').removeAttr("checked");this.style.background='none';} else {$(this).find('.row-select').attr("checked","checked");} }); }); </script>

The script, in theory, when you click on a line should mark the checkbox and color the line, and when you re-remove the checkbox and coloring. Once it is possible to do it, but then it only paints the line, and then it stops working.

Answer 1 · 2016-03-11T16:01:47

In the jQuery documentation, the attr method is not used to change the checked, selected or disabled properties. This is written right at the very beginning of the documentation. To work with them are functions and methods that should be used, in particular prop .

It should also be borne in mind that when an event ascends when it clicks on the checkbox itself, it will change twice, so this moment must also be taken into account.

 $(document).ready(function($) { $('.row').click(function(event) { var row = $(this), chk = $(this).find('.row-select').eq(0); if(!chk.is(event.target)) { chk.prop("checked", !chk.prop("checked")); } if(chk.prop("checked")){ row.css("background","none"); } else { row.css("background","#fffdb5"); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="spc" border="0" cellspacing="0" cellpadding="2" width="98%"> <col width="5%"> <col width="5%"> <col width="10%"> <col width="25%"> <col width="12%"> <col width="15%"> <col width="20%"> <col width="15%"> <tr class="thd "> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку"><input type="checkbox" id="all"></td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">id</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Имя</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Логин</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Телефон</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Почта</td> <td class="thd " onclick="sort(this)"title="Нажмите на заголовок, чтобы отсортировать колонку">Активность</td> <td class="thd " onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Статус</td> </tr> <tr class="row"> <td class="under_cell"><input type="checkbox" class="row-select"></td> <td class="under_cell">00001</td> <td class="under_cell">title</td> <td class="under_cell">middle name</td> <td class="under_cell">last name</td> <td class="under_cell">company</td> <td class="under_cell">E-mail address</td> <td class="under_cell">web page</td> </tr> <tr class="row"> <td class="under_cell"><input type="checkbox" class="row-select"></td> <td class="under_cell">00002</td> <td class="under_cell">title</td> <td class="under_cell">middle name</td> <td class="under_cell">last name</td> <td class="under_cell">company</td> <td class="under_cell">E-mail address</td> <td class="under_cell">web page</td> </tr> </table>

Venzell 18.5k five thirty 55 · Answer 2 · 2016-03-11T14:57:32

 $('.row').click(function(event) { $(this).find('.row-select').click(); this.style.background = ''; if ($(this).find('.row-select').is(":checked")) { this.style.background = '#ccc'; } }); });

And after you changed the color by clicking on the line, does the checkbox itself fall off?

Coloring table rows

2 answers 2

More articles: