6

我一直在这个问题上一段时间没有运气。

请注意。没有 jquery =/

我拥有的JS代码如下

function highlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

HTML如下

<table id="dataTable">
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
  <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>

目前，当我单击它时，它会改变颜色，但是当我单击第二行时，第一行仍然突出显示。您能在没有 jquery 的情况下帮助我完成这项任务吗？

谢谢你。

4

5 回答 5

5

我在JSFiddle上创建了以下工作示例

Javascript：

function toggleClass(el, className) {
    if (el.className.indexOf(className) >= 0) {
        el.className = el.className.replace(className,"");
    }
    else {
        el.className  += className;
    }
}

HTML：

<table class="gridview">
   <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
   <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
   <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
</table>

CSS：

.gridview .selected, .gridview tbody .selected {
    background-color: #6ccbfb;
    color: #fff;
}
于 2015-01-07T12:28:34.330 回答
5

我最近遇到了同样的问题，只是使用纯 JS 解决了它这是我的版本 https://jsfiddle.net/armaandhir/Lgt1j68s/

function highlight_row() {
    var table = document.getElementById('display-table');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
            var rowId = this.parentNode.rowIndex;

            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";

            msg = 'The ID of the company is: ';
            msg += rowSelected.cells[0].innerHTML;
            msg += '\nThe cell value is: ' + this.innerHTML;
            alert(msg);
        }
    }

} //end of function

window.onload = highlight_row;
于 2015-08-01T22:33:07.680 回答
3

您需要取消突出显示其他行，因为现在您只是更改单击的行。

function highlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    unhighlight();
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

function unhighlight(){
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
   var row = table.rows[i];
   row.style.backgroundColor=this.origColor;
   row.hilite = false;
 }
}
于 2013-01-21T17:03:22.857 回答
1

取消选择时无法取消突出显示行

 <script type="text/javascript">

  function highlight(){
  var hilite;  
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    unhighlight();
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#fdee9a';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

function unhighlight(){
  var hilite;
 var table = document.getElementById('dataTable');
 for (var i=0;i < table.rows.length;i++){
   var row = table.rows[i];
   row.style.backgroundColor=this.origColor;
   row.hilite = false;
 }
}

  </script>
于 2016-09-20T11:42:39.717 回答
0

此演示表行选择具有以下功能：

  • 选择单击的行，并取消选择任何先前选择的行
  • 如果单击已选择的行，则未选中

注意：这是基于@Richard YS 发布的答案

HTML：

 <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr onclick="selectRow(this,'selected');">
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>John Doe</td>
        <td>USA</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>Shankra Pillai</td>
        <td>India</td>
      </tr>
    </tbody>
  </table>

Java 脚本：

    let prevIx
    let prevTr

    function selectRow(tr, className) {

        let ix = tr.rowIndex

        if (ix === prevIx) { // row already selected, so unselect
          tr.className = tr.className.replace(className,"")
          prevIx = null
          prevTr = null
        }
        else { // no selected rows

          if (prevTr) {
            // unselect previously selected row
            prevTr.className = prevTr.className.replace(className,"")
          }

          // select current row
          tr.className += className
          prevIx = ix
          prevTr = tr
        }
    }

CSS：

table .selected {
    background-color: #6ccbfb;
    color: #fff;
}
于 2021-12-11T15:07:08.193 回答