如何在选择单元格时突出显示表格列
问题描述：
我设法在用户单击时突出显示单元格（td-element）。
但是，我想整个列被高亮显示，单元格本身略有不同。
我无法完成最后一部分（突出显示整列）。 在这方面的所有帮助表示赞赏。如何在选择单元格时突出显示表格列
期望得到的结果会是这样的下面：
function handleBlur(event) {
\t \t event.target.contentEditable = false;
\t }
\t
\t document.querySelector('body').addEventListener('click', function(event) {
\t \t if (event.target.tagName.toLowerCase() === 'td') {
\t \t \t event.target.contentEditable = true;
\t \t \t event.target.focus();
\t \t \t event.target.addEventListener("blur", handleBlur);
}
\t });table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: white;
}
table td[contentEditable=true]{
\t \t -webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
\t \t -moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
\t \t box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
\t \t outline: 3px solid #086AA7;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
答
现在，你可以通过使用本地的DOM API轻松地做到这一点没有jQuery的。
查找所选单元格在孩子们的索引它的父（使用cellIndex），然后迭代的cols和更改相关col的背景中colgroup：
function handleBlur(event) {
event.target.contentEditable = false;
}
var cols = document.querySelectorAll('col'); // find the cols and cache
document.querySelector('body').addEventListener('click', function(event) {
var t = event.target;
if (t.tagName.toLowerCase() !== 'td') {
return;
}
t.contentEditable = true;
t.focus();
t.addEventListener("blur", handleBlur);
var highlightIndex = t.cellIndex; // the index of the clicked item in the row
cols.forEach(function(col, index) { // iterate the cols
col.style.background = index === highlightIndex ? 'lightblue' : null; // set the background to the clicked col, remove from others
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table td[contentEditable=true] {
box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
outline: 3px solid #086AA7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<colgroup> <!-- add a colgroup with a col item for each column -->
<col>
<col>
<col>
</colgroup>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
你必须计算它是哪个'td'，然后遍历你的表的所有'tr's，并将一个样式应用到每个'tr'的x-'td'。 – Danmoreng
'event.target.cellIndex'告诉你哪个'td'是 –
链接的可能重复向你展示了jQuery中的一个解决方案。你有jQuery作为标签，所以我假设你可以在所有相关的'td'元素上为同一个索引使用jQuery切换类。 – Nope