我有一个具有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>
答案 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)
固定代码: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);
});