Question

如何在下面修改代码，以便在用户单击列标题框时返回列标题的名称。 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>

Answer 1

应该这样做： jsFiddle example 。

  (
  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());
      }
  })();

Answer 2

所有循环都是什么！不需要循环，使用您的事件对象来告诉您点击了什么！

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

单击表标题名称时对其进行警报

2 个答案: