Question

如何将功能添加到下面的现有javascript编码中，以找出点击的行号。表头应该是免除的，数据集将从ID号0开始。

因此，例如，如果单击表格的第2行，则会弹出一个警告框，提示“ID＃is 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>

Answer 1

结帐rowIndex属性here。它从0开始。

Answer 2

只需将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'));
      }
  }
}
)();

查找单击行的表行号

2 个答案: