Javascript高亮显示onclick表单元格

Javascript highlight onclick table cell

本文关键字：表单 单元格 onclick 显示 高亮 Javascript      更新时间：2023-09-26

<table>
	<tr>
	 <td align="center" class="topmenu"><a href="../cases/showProject.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><img src="../Grafik/newMenuAnalyse.png" alt="" border="0"></a><a href="../cases/showProject.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><%= TR("Project data") %></a></td>
	 <td align="center" class="topmenu" valign="middle"><a href="../cases/Sagskort.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><img src="../Grafik/newMenuProjects.png" alt="" border="0"></a><a href="../cases/Sagskort.asp?ID=<%=ID%>" onclick="if(gv_changeHaveBeenMade){return window.confirm('<%= TR("Page change but not saved. Continue?") %>')}"><%= TR("Project card") %></a></td>
    </tr>
</table>

我有一张表，里面只有一行和很多<td>，其中包含一张图片和一些链接到其他页面的文本，这些页面在我想要突出显示的菜单项下面的框架中更新。

目前我正在处理这段代码，但无法使其正常工作。

function highlight_data() {
var table = document.getElementById('display-table');
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function () {
        var tdId = this.parentNode.cellIndex;
        var tdNotSelected = cells;
        for (var data = 0; data < tdNotSelected.length; data++) {
            tdNotSelected[data].style.backgroundColor = "";
            tdNotSelected[data].classList.remove('selected');
        }
        var tdSelected = cells[tdId];
        tdSelected.style.backgroundColor = "yellow";
        tdSelected.className += " selected";

    }
  }
} //end of function
window.onload = highlight_data;

不知何故，如果我在this.parentNode.cellIndex使用rowIndex而不是cellIndex，它可以在单击时高亮显示单个单元格。我高亮显示了我在测试中所选行中单击的单元格旁边的单元格。

请记住，如果可能的话，我希望这是纯JS，谢谢。

编辑：Rayon的回答部分有效，我没有提到这是一个用链接链接到的内容更新框架的菜单，Rayon的答案突出显示单元格，直到框架完成加载新页面，然后突出显示消失。

  • 使用[].forEach.call迭代所有td元素并移除样式
  • 在点击处理程序中使用this，它只不过是element本身，并设置样式

function highlight_data() {
  var table = document.getElementById('display-table');
  var cells = table.getElementsByTagName('td');
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function() {
      [].forEach.call(cells, function(el) {
        el.style.backgroundColor = "";
      });
      this.style.backgroundColor = "yellow";
    }
  }
}
window.onload = highlight_data;
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
<table id="display-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 Moctezuma</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 Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

相关文章：