Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Finding the table row number of a clicked row only

    Hello,

    I need the help of an expert here on this forum. The level of javascript is well beyond my capabilities and knowlege.

    How can functionaity be added to the existing javascript coding below to find out as to what the row number is only clicked. The table headers should be exempt, and the dataset row number should start at ID number 0.

    So for example, if the 2nd row of the table was clicked, an alert box would popup saying that "ID # is 1" and so fourth.

    Much thanks and appreciation for all your help and support

    Cheers

    Jay

    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
          function highlightRow(e)
          {
                alert('Row is ' + this.rowIndex); // or (this.rowIndex - 1) if you prefer
    The following would give you the cell index:

    Code:
          function highlightRow(e)
          {
                var evt = e || window.event;
                var elem = evt.target || evt.srcElement;
                if (elem.nodeName == "TD") {
                    alert('Cell is ' + elem.cellIndex);
                }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    jason_kelly (01-14-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •