Question

我需要这位问题专家的帮助。我的问题是，如何修改下面的javascript编码，以便允许用户手动导航（使用向上和向下箭头键）来选择并突出显示表格行。

为用户添加此功能非常有用。

非常感谢和感谢您的所有帮助和支持

<!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];
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>

</body>
</html>

使用向上和向下箭头键选择（突出显示）表格行

0 个答案: