使用Jquery

时间：2019-05-25 11:36:42

标签： jquery html-table

我有一个具有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 个答案:

答案 0 :(得分：1)

通过找到索引，您处在正确的路径中，但您只上到tr，但是对于此问题，您还需要查找另一个tr's，以找到第n th < / sup>已选择的列。

想法是在所有tr中找到所有第n th 列，并从所有列中删除类，现在我们已引用了选定列（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>

答案 1 :(得分：0)

这里不需要jQuery，使用原始的ES6 Javascript（占DOM操作资料的99.9％），这非常干净并且容易实现：

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>

答案 2 :(得分：0)

这是您的答案，我已解决您的疑虑

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

答案 3 :(得分：0)

  1. 在HTML中，将类添加到三列中。
  2. 单击单元格时，首先将反向驱动移到列中的所有单元格。
  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');
        });
    });
});

答案 4 :(得分：0)

您可以使用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>

答案 5 :(得分：-1)

从所有 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);

}）;

相关问题
最新问题