0

クリックされた行番号を確認するために、以下の既存のJavaScriptコーディングに機能を追加するにはどうすればよいですか。テーブルヘッダーは免除される必要があり、データセットはID番号0から始まります。

したがって、たとえば、テーブルの2行目がクリックされた場合、「ID番号は1です」という警告ボックスがポップアップ表示されます。

<!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( )
      {
          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

2

ここでrowIndexプロパティをチェックアウトします。0から始まります。

于 2013-01-12T17:02:37.087 に答える
0

data-row-noすべてに属性を付けるだけです<tr>。次に、JavaScript呼び出しtrow.getAttribute('data-row-no')から、現在の行を取得します。

...
 <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 data-row-no="0"> 
    <td>KABC</td>
    <td>09/12/2002</td>
    <td>09/12/2002</td>
    <td>Submitted</td>
    <td>0</td>

  </tr>
  <tr data-row-no="1"> 
    <td>KCBS</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Approved</td>
    <td>1&nbsp;</td>
  </tr>

  <tr data-row-no="2"> 
    <td>WFLA</td>
    <td>09/11/2002</td>
    <td>09/11/2002</td>
    <td>Submitted</td>
    <td>2</td>
  </tr>
  <tr data-row-no="3"> 
    <td>WTSP</td>
    <td>09/15/2002</td>
    <td>09/15/2002</td>
    <td>In-Progress</td>
    <td>3</td>
  </tr>


...
(
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( )
  {
      for ( var t = 1; t < trows.length; ++t )
      {
          trow = trows[t];
          trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
          alert(trow.getAttribute('data-row-no'));
      }
  }
}
)();
于 2013-01-12T17:12:27.907 に答える