Javascript突出显示onclick表格单元格

时间:2016-08-17 09:08:55

标签: javascript html

<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的回答突出显示单元格,直到框架完成加载新页面然后突出显示消失。

1 个答案:

答案 0 :(得分:3)

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

&#13;
&#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;
&#13;
&#13;