Счетчик неправильно считает элемента в таблице со слитыми рядами

180
19 января 2022, 23:20

Есть таблица, в начале каждого ряда которой есть чекбокс. При клике на этот чекбокс открывается блок-меню.

Но когда ряды частично слиты атрибутом rowspan, то счетчик неправильно считает чекбоксы, из-за чего открываются неверные меню.

В случае когда нет атрибута rowspan, клик на чекбокс открывает меню в соседней ячейке таблицы. Но когда строки слиты rowspan, то при клике на чекбоксы, которые находятся ниже слитого ряда, открывается не меню в соседней клетке, а два меню - в соседней и нижней.

Код https://jsfiddle.net/kaintz/Lcmtezpv/14/

//чекбоксы 
var countSelectedCheckBox = 0; 
 
$("#table-head-check").click(function(e) { 
  if (!$(this).hasClass('clicked')) { // если класса нет 
    $(this).addClass('clicked'); // добавляем класс 
    $('input[type=checkbox]').prop('checked', true); 
    $($('div.settings-user')).hide(); 
    $($('#settings-user-head')).show(); 
    countSelectedCheckBox = $("input:checkbox:checked").length - 1; 
    // countSelectedCheckBox=999; // устанавливаем большое значение, чтобы после клика в шапке выделить все 
    //не появлялась строка редактирования для каждой строки 
  } else { // если есть 
    $(this).removeClass('clicked'); // убираем класс 
    $('input[type=checkbox]').prop('checked', false); 
    $('#minus-head').css('backgroundImage', 'unset'); 
    $($('#settings-user-head')).hide(); 
    countSelectedCheckBox = 0; 
  } 
  console.log(countSelectedCheckBox); 
}) 
 
$('input.ShowOrHide').click(function(e) { 
  //считаес сколько чекбоксов выбрано 
  if (this.checked) { 
    countSelectedCheckBox++; 
  } else { 
    countSelectedCheckBox--; 
  }; 
  console.log(countSelectedCheckBox); 
  //если выбрано больше одного, то прячем для всех польхователей строку редактирования\ 
  //и добавляем строку редактирования в шапку 
  if (countSelectedCheckBox > 1) { 
    $($('div.settings-user')).hide(); 
    $($('#settings-user-head')).show(); 
    $('#minus-head').css('backgroundImage', 'url(img/remove.svg)'); 
  } //Если выбран один или не выбрано пользователей, то прячем редактирование в шапке 
  else { 
    $($('#settings-user-head')).hide(); 
    //ищем выбранный чекбокс и ближаюший блок с панелью редактирования для него и показываем 
    $("input:checkbox:checked").parents('td').siblings('td').find('.settings-user').show(); 
    $('#table-head-check').removeAttr("checked"); 
    $('#minus-head').css('backgroundImage', 'unset'); 
  } 
  if (countSelectedCheckBox < $("input:checkbox:checked").length) { 
    $('#table-head-check').prop('checked', false); 
    $('#minus-head').css('backgroundImage', 'url(img/remove.svg)'); 
  } 
  var indexOfElement = $(this).parents('tr').index(); 
  if ($(this).attr('id') == 'table-head-check') { 
 
  } else { 
    if ($(this).is(':checked') && countSelectedCheckBox <= 1) { 
 
      $($('div.settings-user')[indexOfElement + 1]).show(); 
    } else { 
      $($('div.settings-user')[indexOfElement + 1]).hide(); 
    } 
  } 
});
body { 
  background: #fff; 
  padding: 20px; 
} 
 
table { 
  border-collapse: collapse; 
} 
 
th, td { 
  border: 1px solid grey; 
  position: relative; 
} 
 
.checkbox label.i-checks { 
    padding-left: 15px; 
    color: #aab8ce; 
    font-size: 16px; 
} 
.checkbox .i-checks input[type="checkbox"]  { 
    border-radius: 3px; 
    box-shadow: none; 
    float: left; 
    transition: none; 
    opacity: 0; 
} 
.checkbox .i-checks > i { 
    border: 1px solid #bdc7d8; 
    display: inline-block; 
    height: 17px; 
    margin-left: -15px; 
    margin-right: 13px; 
    margin-top: -2px; 
    position: relative; 
    vertical-align: middle; 
    width: 17px; 
    border-radius: 3px; 
} 
.checkbox .i-checks input:checked + i::before { 
    content: ''; 
    position: absolute; 
    transition: all 0.2s ease 0s; 
    background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png); 
    height: 17px; 
    width: 17px; 
    background-repeat: no-repeat; 
    background-size: 18px; 
    top: -5px; 
    right: -5px; 
} 
 
.settings-user{ 
    display: none; 
    position: absolute; 
    left: 10px; 
    background: blue; 
    z-index: 10; 
    top: 11px; 
    height: calc(100% - 20px); 
    width: max-content; 
    padding-top: 5px; 
} 
.settings-user a { 
    text-decoration: underline; 
    margin-right: 35px; 
    text-transform: lowercase; 
    color: #fff; 
    padding-left: 15px; 
     
}
<table class="table-rating" id="allUsers"> 
  <thead class="ff-b"> 
    <tr> 
      <th> 
        <div class="checkbox"> 
          <label class="i-checks"> 
                <input type="checkbox" id="table-head-check"> 
                <i id="minus-head"></i> 
              </label> 
        </div> 
      </th> 
      <th> 
        <div class="settings-user" id="settings-user-head"> 
          <a href="#" data-toggle="modal" data-target="#delete-modal">Удалить</a> 
        </div> 
        ФИО</th> 
      <th>Специализация</th> 
      <th>Телефон</th> 
      <th>Email</th> 
    </tr> 
  </thead> 
 
  <tbody> 
    <tr> 
      <td rowspan="2"> 
        <div class="checkbox"> 
          <label class="i-checks"> 
                    <input type="checkbox" class="ShowOrHide"> 
                    <i></i> 
                </label> 
        </div> 
      </td> 
      <td rowspan="2"> 
        <div class="settings-user"> 
          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
        </div> 
        Поляков Андрей Владимирович</td> 
      <td rowspan="2">HR</td> 
      <td rowspan="2">+375 (29) 767-99-04</td> 
      <td>orlov@gmail.com</td> 
    </tr> 
 
    <tr> 
      <td>orlov@gmail.com</td> 
    </tr> 
 
    <tr> 
      <td> 
        <div class="checkbox"> 
          <label class="i-checks"> 
                  <input type="checkbox" class="ShowOrHide"> 
                  <i></i> 
              </label> 
        </div> 
      </td> 
      <td> 
        <div class="settings-user"> 
          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
        </div> 
        Поляков Андрей Владимирович</td> 
      <td>HR</td> 
      <td>+375 (29) 767-99-04</td> 
      <td>orlov@gmail.com</td> 
    </tr> 
    <tr> 
      <td> 
        <div class="checkbox"> 
          <label class="i-checks"> 
                    <input type="checkbox" class="ShowOrHide"> 
                    <i></i> 
                </label> 
        </div> 
      </td> 
      <td> 
        <div class="settings-user"> 
          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
        </div> 
        Поляков Андрей Владимирович</td> 
      <td>HR</td> 
      <td>+375 (29) 767-99-04</td> 
      <td>orlov@gmail.com</td> 
    </tr> 
  </tbody> 
</table> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Можно ли исправить эту ситуацию? Спасибо за помощь.

Answer 1

не понятно что имели введу - посмотрите может так.

//чекбоксы 
		var countSelectedCheckBox = 0; 
 
		$("#table-head-check").click(function(e) { 
		  if (!$(this).hasClass('clicked')) { // если класса нет 
		    $(this).addClass('clicked'); // добавляем класс 
		    $('input[type=checkbox]').prop('checked', true); 
		    $($('div.settings-user')).hide(); 
		    $($('#settings-user-head')).show(); 
		    countSelectedCheckBox = $("input:checkbox:checked").length - 1; 
		    // countSelectedCheckBox=999; // устанавливаем большое значение, чтобы после клика в шапке выделить все 
		    //не появлялась строка редактирования для каждой строки 
		  } else { // если есть 
		    $(this).removeClass('clicked'); // убираем класс 
		    $('input[type=checkbox]').prop('checked', false); 
		    $('#minus-head').css('backgroundImage', 'unset'); 
		    $($('#settings-user-head')).hide(); 
		    countSelectedCheckBox = 0; 
		  } 
		  console.log(countSelectedCheckBox); 
		}); 
 
		  $("#allUsers tbody tr").each((i, tr) => { 
		  	$(tr).find(".ShowOrHide").click((e) => { 
		  		let settingsUser = $(tr).find("div.settings-user"); 
 
		  		if ($(e.target).prop("checked")) { 
		  			countSelectedCheckBox++; 
		  			$(settingsUser).show(); 
		  		} else { 
		  			countSelectedCheckBox--; 
		  			$(settingsUser).hide(); 
		  		} 
 
		  		//console.log(countSelectedCheckBox); 
		  	}); 
		  });
body { 
		  background: #fff; 
		  padding: 20px; 
		} 
 
		table { 
		  border-collapse: collapse; 
		} 
 
		th, td { 
		  border: 1px solid grey; 
		  position: relative; 
		} 
 
		.checkbox label.i-checks { 
		    padding-left: 15px; 
		    color: #aab8ce; 
		    font-size: 16px; 
		} 
		.checkbox .i-checks input[type="checkbox"]  { 
		    border-radius: 3px; 
		    box-shadow: none; 
		    float: left; 
		    transition: none; 
		    opacity: 0; 
		} 
		.checkbox .i-checks > i { 
		    border: 1px solid #bdc7d8; 
		    display: inline-block; 
		    height: 17px; 
		    margin-left: -15px; 
		    margin-right: 13px; 
		    margin-top: -2px; 
		    position: relative; 
		    vertical-align: middle; 
		    width: 17px; 
		    border-radius: 3px; 
		} 
		.checkbox .i-checks input:checked + i::before { 
		    content: ''; 
		    position: absolute; 
		    transition: all 0.2s ease 0s; 
		    background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png); 
		    height: 17px; 
		    width: 17px; 
		    background-repeat: no-repeat; 
		    background-size: 18px; 
		    top: -5px; 
		    right: -5px; 
		} 
 
		.settings-user{ 
		    display: none; 
		    position: absolute; 
		    left: 10px; 
		    background: blue; 
		    z-index: 10; 
		    top: 11px; 
		    height: calc(100% - 20px); 
		    width: max-content; 
		    padding-top: 5px; 
		} 
		.settings-user a { 
		    text-decoration: underline; 
		    margin-right: 35px; 
		    text-transform: lowercase; 
		    color: #fff; 
		    padding-left: 15px; 
		     
		}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table class="table-rating" id="allUsers"> 
	  <thead class="ff-b"> 
	    <tr> 
	      <th> 
	        <div class="checkbox"> 
	          <label class="i-checks"> 
	                <input type="checkbox" id="table-head-check"> 
	                <i id="minus-head"></i> 
	              </label> 
	        </div> 
	      </th> 
	      <th> 
	        <div class="settings-user" id="settings-user-head"> 
	          <a href="#" data-toggle="modal" data-target="#delete-modal">Удалить</a> 
	        </div> 
	        ФИО</th> 
	      <th>Специализация</th> 
	      <th>Телефон</th> 
	      <th>Email</th> 
	    </tr> 
	  </thead> 
 
	  <tbody> 
	    <tr> 
	      <td rowspan="2"> 
	        <div class="checkbox"> 
	          <label class="i-checks"> 
	                    <input type="checkbox" class="ShowOrHide"> 
	                    <i></i> 
	                </label> 
	        </div> 
	      </td> 
	      <td rowspan="2"> 
	        <div class="settings-user"> 
	          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
	        </div> 
	        Поляков Андрей Владимирович</td> 
	      <td rowspan="2">HR</td> 
	      <td rowspan="2">+375 (29) 767-99-04</td> 
	      <td>orlov@gmail.com</td> 
	    </tr> 
 
	    <tr> 
	      <td>orlov@gmail.com</td> 
	    </tr> 
 
	    <tr> 
	      <td> 
	        <div class="checkbox"> 
	          <label class="i-checks"> 
	                  <input type="checkbox" class="ShowOrHide"> 
	                  <i></i> 
	              </label> 
	        </div> 
	      </td> 
	      <td> 
	        <div class="settings-user"> 
	          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
	        </div> 
	        Поляков Андрей Владимирович</td> 
	      <td>HR</td> 
	      <td>+375 (29) 767-99-04</td> 
	      <td>orlov@gmail.com</td> 
	    </tr> 
	    <tr> 
	      <td> 
	        <div class="checkbox"> 
	          <label class="i-checks"> 
                <input type="checkbox" class="ShowOrHide"> 
                <i></i> 
            </label> 
	        </div> 
	      </td> 
	      <td> 
	        <div class="settings-user"> 
	          <a href="#" data-toggle="modal" data-target="#delete-modal">Снять права</a> 
	        </div> 
	        Поляков Андрей Владимирович</td> 
	      <td>HR</td> 
	      <td>+375 (29) 767-99-04</td> 
	      <td>orlov@gmail.com</td> 
	    </tr> 
	  </tbody> 
	</table>

READ ALSO
Как обратиться к элементу вне формы?
javascript

Как обратиться к элементу вне формы?

Мне нужно чтобы при нажатии на кнопку, которая находится в форме, создавалась другая кнопка при нажатии на которую появлялось бы слово

 69
Ожидание ответа от второго Observable в RxJava2
Java

Ожидание ответа от второго Observable в RxJava2

У меня есть данные в локальной базе и данные с сервераЯ должен вывести сперва данные с локальной базы, если есть, иначе подождать данных от сервера

 95
Как прочитать объект из потока
Java

Как прочитать объект из потока

Есть задание: Многопоточный клиент-сервер

 119
Как собрать javaFx проект
Java

Как собрать javaFx проект

когда достиг финальной части своего задания столкнулся с такой проблемой, что не могу собрать проект в полноценный jar файл, выдаёт ошибку...

 91