1

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

2 回答 2

1

这应该这样做：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());
      }
  })();
于 2013-01-14T18:16:33.060 回答
1

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

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

于 2013-01-14T18:21:02.563 回答