1

ユーザーが列ヘッダーボックスをクリックしたときに列ヘッダーの名前を返すように、以下のコードをどのように変更できますか。すなわち。「ファイル番号」ボックスをクリックすると、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 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());
      }
  })();
于 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);
}

上記は、テーブル全体に対する 1 回のクリック イベントである可能性があります。クリックされた要素の種類を確認したくありませんでした。

JSFiddle

于 2013-01-14T18:21:02.563 に答える