Разрешить только одну ячейку на столбец в таблице HTML с помощью Jquery - PullRequest
Новая
       19

Разрешить только одну ячейку на столбец в таблице HTML с помощью Jquery

0 голосов
/ 25 мая 2019

У меня есть таблица с 3 строками и 3 столбцами, и я хочу добавить класс selectedTd в выбранную ячейку. Но условие таково: добавьте одну ячейку в столбце. Если я выберу другую ячейку в том же столбце, то сначала выделю, чтобы отменить выделение, и заново щелкну ячейку, чтобы выбрать. 

$(document).on("click", "#blank3table td", function() {
  var tdId = $(this).attr("id");
  var x = $(this).closest('tr');
  var columnNo = $(this).index();
  var col1 = x.find('td:eq(' + columnNo + ')').addClass("selectedTd").text();
  /*var columnNo = $(this).index();
  $(this).eq( columnNo ).addClass("selectedTd");*/
  console.log(col1);
});
.selectedTd {
  background: #333;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1">perspicuity</td>
    <td id="2">fugacious</td>
    <td id="3">eludible</td>
  </tr>
  <tr>
    <td id="4">incertitude</td>
    <td id="5">perdurable</td>
    <td id="6">ineluctable</td>
  </tr>
  <tr>
    <td id="7">approbation</td>
    <td id="8">enervating</td>
    <td id="9">propitious</td>
  </tr>
</table>

Ответы [ 6 ]

1 голос
/ 25 мая 2019

Вы нашли правильный путь, найдя индекс, но поднялись только до tr, однако для этой проблемы вам нужно найти еще один tr's, чтобы найти n th , уже выбранныйстолбцов.

Идея состоит в том, чтобы найти все столбцы n th во всех tr и удалить класс из всех них, а теперь у нас есть ссылка на выбранный столбец (this), добавить класс к нему.

$(document).on("click", "#blank3table td", function() {
	let index = $(this).index()+1;
	$(this)
	.closest('table')
	.find('tr>td:nth-child('+index+')')
	.removeClass('selectedTd');
	
	var col1 = $(this).addClass('selectedTd').text();
	console.log(col1);
});
.selectedTd {
  background: #333;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1">perspicuity</td>
    <td id="2">fugacious</td>
    <td id="3">eludible</td>
  </tr>
  <tr>
    <td id="4">incertitude</td>
    <td id="5">perdurable</td>
    <td id="6">ineluctable</td>
  </tr>
  <tr>
    <td id="7">approbation</td>
    <td id="8">enervating</td>
    <td id="9">propitious</td>
  </tr>
</table>
0 голосов
/ 25 мая 2019

Вы можете использовать селектор nth-child, чтобы удалить класс из всех ячеек в том же столбце, как показано ниже. Кроме того, я бы не рекомендовал использовать document в качестве селектора для делегированного события щелчка. Вместо этого используйте родительскую таблицу, которая более конкретна. 

$("#blank3table").on("click", "td", function() {
  // remove class of all cells with same index using `nth-child` selector
  $(this).closest('table')
    .find('td:nth-child(' + ($(this).index() + 1) + ')')
    .removeClass('selectedTd');
  // add your class to the clicked cell
  const col1 = $(this).addClass("selectedTd").text();
  console.log(col1);
});
.selectedTd {
  background: #333;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1">perspicuity</td>
    <td id="2">fugacious</td>
    <td id="3">eludible</td>
  </tr>
  <tr>
    <td id="4">incertitude</td>
    <td id="5">perdurable</td>
    <td id="6">ineluctable</td>
  </tr>
  <tr>
    <td id="7">approbation</td>
    <td id="8">enervating</td>
    <td id="9">propitious</td>
  </tr>
</table>
0 голосов
/ 25 мая 2019
  1. В HTML добавьте классы к трем столбцам.
  2. При щелчке по ячейке сначала удалите backdroung для всех ячеек в столбце.
  3. И, наконец, добавьте фонк выбранной ячейке.

Фиксированный код: https://jsfiddle.net/tLfz4sa1/3/

HTML 

<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1" class="column1">perspicuity</td>
    <td id="2" class="column2">fugacious</td>
    <td id="3" class="column3">eludible</td>
  </tr>
  <tr>
    <td id="4" class="column1">incertitude</td>
    <td id="5" class="column2">perdurable</td>
    <td id="6" class="column3">ineluctable</td>
  </tr>
  <tr>
    <td id="7" class="column1">approbation</td>
    <td id="8" class="column2">enervating</td>
    <td id="9" class="column3">propitious</td>
  </tr>
</table>

JS 

const columnsSelectors = ['.column1', '.column2', '.column3'];
columnsSelectors.forEach(columnSelector => {
    const currentCells = document.querySelectorAll(columnSelector);
    currentCells.forEach(cell => {
        cell.addEventListener('click', function() {
            // remove class selected for all the column
            currentCells.forEach(c => { c.classList.remove('selectedTd')});
            // add selected class to selected node
            this.classList.add('selectedTd');
        });
    });
});
0 голосов
/ 25 мая 2019

Удалите класс из всех первых td . 

$("#blank3table td").removeClass('selectedTd');

Затем добавьте класс к этому конкретному td , как вы это сделали.Это будет работать.Обратите внимание: удалите класс в начале вашей функции. 

$(document).on("click", "#blank3table td", function() {
   $("#blank3table td").removeClass('selectedTd');
   var tdId = $(this).attr("id");
   var x = $(this).closest('tr');
   var columnNo = $(this).index();
   var col1 = x.find('td:eq(' + columnNo + ')').addClass("selectedTd").text();
   /*var columnNo = $(this).index();
   $(this).eq( columnNo ).addClass("selectedTd");*/
   console.log(col1);

});

0 голосов
/ 25 мая 2019

Вот ваш ответ, я исправил ваши слова 

$(document).on("click", "#blank3table td", function(){
    var tdId = $(this).attr("id");
    var x = $(this).closest('tr');
    var columnNo = $(this).index();
    $(this).closest('table').find('td').each(function(){
      if($(this).index() == columnNo){
        $(this).removeClass("selectedTd")
      }
    });
    var col1 = $(this).addClass("selectedTd").text();
    console.log(col1);
});
.selectedTd {
  background: #333;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1">perspicuity</td>
    <td id="2">fugacious</td>
    <td id="3">eludible</td>
  </tr>
  <tr>
    <td id="4">incertitude</td>
    <td id="5">perdurable</td>
    <td id="6">ineluctable</td>
  </tr>
  <tr>
    <td id="7">approbation</td>
    <td id="8">enervating</td>
    <td id="9">propitious</td>
  </tr>
</table>
0 голосов
/ 25 мая 2019

Здесь нет необходимости в jQuery, это довольно чисто и легко сделать, используя vanilla ES6 Javascript (как 99,9% всего, что нужно для манипулирования DOM): 

blank3table.addEventListener('click', ({target: cell}) => {
  if (!cell.matches('td')) return; // when clicked on a border, do nothing
  [...blank3table.querySelectorAll('td')] /// get an array of all tds
    .filter(td => td.cellIndex === cell.cellIndex) // boil them down to those with same index as clicked td
    .forEach(td  => td.classList[td === cell ? 'add' : 'remove']('selectedTd')); // and iterate over the remaining, adding/removing the class as necessary
  console.log(cell.textContent);
})
.selectedTd {
  background: #333;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" align="center" id="blank3table">
  <tr>
    <td id="1">perspicuity</td>
    <td id="2">fugacious</td>
    <td id="3">eludible</td>
  </tr>
  <tr>
    <td id="4">incertitude</td>
    <td id="5">perdurable</td>
    <td id="6">ineluctable</td>
  </tr>
  <tr>
    <td id="7">approbation</td>
    <td id="8">enervating</td>
    <td id="9">propitious</td>
  </tr>
</table>
...