当单击表头名称时，提醒它

Alert the table header name when it is clicked

本文关键字：单击表头更新时间：2023-09-26

如何修改下面的代码，以便在用户点击列标头框时返回列标头的名称。Ie。如果我点击"文件编号"框，一个javascript警告框会提醒我列标题(th)的名称是"文件编号"等。

<!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>
<script type="text/javascript">
(
  function( )
  {
      var trows = document.getElementById("mstrTable").rows;
      for ( var t = 1; t < trows.length; ++t )
      {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }
      function highlightRow(e)
      {
      alert('Row is ' + (this.rowIndex-1))
          for ( var t = 1; t < trows.length; ++t )
          {
              trow = trows[t];
              trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
          }
      }
  }
)();
</script>
</body>
</html>

怎么这么循环!没有必要循环，使用事件对象来告诉你点击了什么!

//assumes one thead and one tbody
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;
   row.className = row.className==="highlighted" ? "" : "highlighted";
}
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);
}

上面可以是整个表的一个点击事件，我不想检查被点击的元素类型。

JSFiddle

应该这样做:jsFiddle示例。

  (
  function () {
      var trows = document.getElementById("mstrTable").rows;
      for (var t = 1; t < trows.length; ++t) {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }
      var theads = document.getElementsByTagName("th");
      for (var t = 0; t < theads.length; t++) {
          thead = theads[t];
          thead.onclick = highlightHead;
      }
      function highlightRow(e) {
          alert('Row is ' + (this.rowIndex - 1))
          for (var t = 1; t < trows.length; ++t) {
              trow = trows[t];
              trow.className = (trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
          }
      }
      function highlightHead(e) {
          alert('Head is ' + this.innerHTML.toString());
      }
  })();