0

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

Но когда ряды частично слиты атрибутом 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>


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

2
  • Что конкретно у вашем примере работает не верно?
    – InDevX
    27 дек 2019 в 8:30
  • Не совсем понятна логика переключений, но в качестве примера
    – user256824
    28 дек 2019 в 14:51

1 ответ 1

0

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

//чекбоксы
		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>

1
  • Я конечно тот еще мастер в формулировании вопросов. Поправила формулировку. Но Ваше решение это именно то что нужно. Спасибо огромное!
    – Irina Zorg
    29 дек 2019 в 14:27

Ваш ответ

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

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