Javascript 表行的双重高亮显示问题_Javascript_Dom

Javascript 表行的双重高亮显示问题

javascript dom

Javascript 表行的双重高亮显示问题,javascript,dom,Javascript,Dom,下面的代码工作得很好，但是，当用户还使用其中一个“转到行”按钮时，如何修改它以使双行不突出显示现在，当用户使用鼠标单击高亮显示的行时，（很好，这里没有问题）但如果用户同时单击其中一个“转到”按钮，则会高亮显示指定的行。（很好，但现在有2行高亮显示，我只希望一次高亮显示1行）我的理论是，如果按下其中一个“转到”按钮，代码应该看到哪一行（如果有亮起的话），取消亮起它并继续亮起指定的行请不要使用jQuery库 <!DOCTYPE html> <html> <hea

下面的代码工作得很好，但是，当用户还使用其中一个“转到行”按钮时，如何修改它以使双行不突出显示

现在，当用户使用鼠标单击高亮显示的行时，（很好，这里没有问题）

但如果用户同时单击其中一个“转到”按钮，则会高亮显示指定的行。（很好，但现在有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>


#mstrTable{
边框：1px纯黑
}
#mstrTable td，th{
边框：1px纯黑
}
#mstrTable tr.normal td{
颜色：黑色；
背景色：白色；
}
#mstrTable tr.td{
颜色：白色；
背景颜色：灰色；
}
文件号
日期1
日期2
地位
号码。
KABC
09/12/2002
09/12/2002
提交
0
KCBS
09/11/2002
09/11/2002
经核准的
1.
WFLA
09/11/2002
09/11/2002
提交
2.
WTSP
09/15/2002
09/15/2002
进行中
3.


var table=document.getElementById（“mstrTable”）；
var thead=table.getElementsByTagName（“thead”）[0]；
var tbody=table.getElementsByTagName（“tbody”）[0]；
tbody.onclick=函数（e）{
e=e | | window.event；
var td=e.target | | e.srcmelement；//假设td中没有其他元素
var row=td.parentNode；
//警报（'行为'+（Row.rowIndex-1））####供以后使用（DB后端使用）###
if（this.lst&&this.lst！=行）{
this.lst.className=''；
}
row.className=row.className==“突出显示”？：“突出显示”；
此.lst=行；
}
thead.onclick=函数（e）{
e=e | | window.event；
var th=e.target | | e.srcmelement；//假设th中没有其他元素
//警报（th.innerHTML）；35;###供以后使用（DB后端使用）###
}
功能转到（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==“突出显示”？：“突出显示”；
GoTo.lst=trs[nu]；
}
}

对于突出显示的行，可以使用全局变量快速解决此问题。例如在


var table=document.getElementById（“mstrTable”）；
var thead=table.getElementsByTagName（“thead”）[0]；
var tbody=table.getElementsByTagName（“tbody”）[0]；
var ishigh；
tbody.onclick=函数（e）{
e=e | | window.event；
var td=e.target | | e.srcmelement；//假设td中没有其他元素
var row=td.parentNode；
if（ishigh&&ishigh！=行）{
ishigh.className=''；
}
row.className=row.className==“突出显示”？：“突出显示”；
ishigh=行；
}
thead.onclick=函数（e）{
e=e | | window.event；
var th=e.target | | e.srcmelement；//假设th中没有其他元素
//警报（th.innerHTML）；35;###供以后使用（DB后端使用）###
}
功能转到（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==“突出显示”？：“突出显示”；
ishigh=trs[nu]；
}
}

您的代码有点复杂。你本可以做得更简单像个魔咒！非常感谢。在JavaScript中，我仍然认为自己是阿罗奇。

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