如何在选择单元格时突出显示表格列

Question

当用户点击时，我设法'突出显示'一个单元格（td-element） 然而，我希望整个专栏都是高亮的，而电池本身则略有不同 我无法完成最后一部分（突出显示整个专栏）。 感谢所有的帮助。

期望的结果如下所示：

function handleBlur(event) {
		event.target.contentEditable = false;
	}
	
	document.querySelector('body').addEventListener('click', function(event) {
		if (event.target.tagName.toLowerCase() === 'td') {
			event.target.contentEditable = true;
			event.target.focus();
			event.target.addEventListener("blur", handleBlur);      
    }
	});

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]{
		-webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
		-moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
		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>
  <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>

Answer 1

现在，通过使用本机DOM apis，您可以在不使用jQuery的情况下轻松完成此任务。

在其父级的子级（使用cellIndex）中查找所选单元格的索引，然后迭代cols，并更改{col中的相关colgroup的背景1}}：

＆＃13;

＆＃13;

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
  });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;