Question

下面的代码非常适合，但是，当用户也使用Go to Row按钮时，如何修改双行不会突出显示。

现在当用户使用鼠标点击它突出显示的一行时（很好，这里没问题）

但如果用户也单击其中一个转到按钮，则会突出显示指定的行。（很好，但是现在有2行突出显示，我只希望一次突出显示1行）

我的理论是，如果按下其中一个按钮，代码应该看到哪一行（如果有任何高亮度），取消它并突出显示指定的行。

请不要使用jQuery库。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable {
     border: 1px solid black
}
#mstrTable td, th {
     border: 1px solid black
}

#mstrTable tr.normal td {
    color: black;
    background-color: white;
}
#mstrTable tr.highlighted td {
    color: white;
    background-color: gray;
}
</style>
</head>
<body>
  <table id="mstrTable">
     <thead>
      <tr>
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      <tr>
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Approved</td>
        <td>1&nbsp;</td>
      </tr>

      <tr>
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr>
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

  <br>
<input type="button" name="" value="GoTo 0" onmouseup="GoTo('mstrTable',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="GoTo('mstrTable',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="GoTo('mstrTable',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="GoTo('mstrTable',3);" />


<script type="text/javascript">

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

tbody.onclick = function (e) {
   e = e || window.event;
   var td = e.target || e.srcElement; //assumes there are no other elements inside the td
   var row = td.parentNode;
   //alert('Row is ' + (row.rowIndex - 1)) ### FOR LATER (DB BACK END USE) ###
   if (this.lst&&this.lst!=row){
    this.lst.className='';
   }
   row.className = row.className==="highlighted" ? "" : "highlighted";
   this.lst=row;
}

thead.onclick = function (e) {
   e = e || window.event;
   var th = e.target || e.srcElement;  //assumes there are no other elements in the th
   //alert(th.innerHTML);  ### FOR LATER (DB BACK END USE) ###
}

function GoTo(id,nu){
  var obj=document.getElementById(id),trs=obj.getElementsByTagName('TR');;
  nu = nu + 1
  if (trs[nu]){
   if (GoTo.lst&&GoTo.lst!=trs[nu]){
    GoTo.lst.className='';
   }
   trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
   GoTo.lst=trs[nu];
  }
 }

</script>
</body>
</html>

Answer 1

您可以使用全局突出显示的行快速解决此问题。 http://jsbin.com/atiwex/1/edit上的示例。

<script type="text/javascript">

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;

tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement; //assumes there are no other elements inside the td
  var row = td.parentNode;
  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
}

thead.onclick = function (e) {
  e = e || window.event;
  var th = e.target || e.srcElement;  //assumes there are no other elements in the th
  //alert(th.innerHTML);  ### FOR LATER (DB BACK END USE) ###
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
}
</script>

有问题的表行双重突出显示

1 个答案: