0

下面的代码可以很好地工作，但是，当用户还使用 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>
4

1 回答 1

0

您可以通过对突出显示的行使用全局来快速解决此问题。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>
于 2013-01-20T06:11:32.267 回答