Question

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

如果我在rowIndex使用cellIndex insted af this.parentNode.cellIndex，它可以突出显示单个单元格onclick bit i突出显示我在测试中所选行中单击的单元格旁边的单元格

请记住，如果可能的话，我希望在纯JS中使用它。

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

Answer 1

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

＆＃13;

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;

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

＆＃13;

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

＆＃13;

Javascript突出显示onclick表格单元格

1 个答案: