0

Есть таблица вида

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

Скрипт, в теории, при нажатии на строку должен отмечать чекбокс и окрашивать строку, а при повторном снимать чекбокс и окраску. Один раз это возможно сделать, но потом он только окрашивает строку, а дальше перестает срабатывать.

2

2 ответа 2

1

В документации по JQuery метод attr не используется для изменения свойств checked, selected или disabled. Это написано прямо в самом начале документации. Для работы с ними приведены функции и методы, которые следует использовать, в частности prop.

Так же следует учитывать, что при всплытии события при клике на самом checkbox он будет меняться дважды, поэтому надо учитывать этот момент тоже.

$(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>

1
$('.row').click(function(event) {
   $(this).find('.row-select').click();
   this.style.background = '';
   if ($(this).find('.row-select').is(":checked")) {
     this.style.background = '#ccc';
   }
});
});
1
  • 1
    И у Вас после того, как вы поменяли цвет через клик по строке, сам checkbox не отваливается?
    – Alex Krass
    11 мар 2016 в 15:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.