How to Tell Which Row Number Is Clicked in a Table

How to tell which row number is clicked in a table?

This would get you the index of the clicked row, starting with one:

$('#thetable').find('tr').click( function(){alert('You clicked row '+ ($(this).index()+1) );});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table id="thetable">   <tr>      <td>1</td><td>1</td><td>1</td>   </tr>   <tr>      <td>2</td><td>2</td><td>2</td>   </tr>   <tr>      <td>3</td><td>3</td><td>3</td>   </tr></table>

Find which row number is clicked in a table using event delegation

event.target.parentElement.rowIndex works like a charm.

function mainClick(){
console.log(event.target.parentElement.rowIndex);
console.log(event.target.innerHTML);
console.log(event.target.tagName);
}

<table onclick="mainClick()">
<tr>
  <th>ID</th>
  <th>Name</th>
</tr>
<tr>
  <td>8475</td>
  <td>yogesh</td>
</tr>
<tr>
  <td>7512</td>
  <td>tarun</td>
</tr>
<tr>
  <td>3322</td>
  <td>aman</td>
</tr>
<tr>
  <td>1232</td>
  <td>vishesh</td>
  </tr>
<tr>
  <td>9877</td>
  <td>rahul</td>
</tr>
</table>

 

Check table row number on button click

I would suggest using a grid view, or even a list view.

so, say you have this markup:

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          cssclass="table"  width="30%">
            <Columns>
                <asp:BoundField DataField="Nome" HeaderText="Nome"  />
                <asp:BoundField DataField="timestamp" HeaderText="timestamp" />

                <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Button ID="cmdView" runat="server" Text="View"  CssClass="btns"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

And now your code can be this:

           string query = "SELECT nome, timestamp FROM dbo.project";
            SqlCommand sqlCmd = new SqlCommand(query, sqlCon);

            DataTable rstData = new DataTable();
            rstData.Load(sqlCmd.ExecuteReader());

            GridView1.DataSource = rstData;
            GridView1.DataBind();

(I left out the parameter's - but you do want to keep them as you have).

So, now we see this:

Ok, so now add a event to the button click:

And our button code click is thus:

   protected void cmdView_Click(object sender, EventArgs e)
    {
        Button btn = sender as Button;
        GridViewRow gRow = btn.NamingContainer as GridViewRow;

        Debug.Print("Row index click = " + gRow.RowIndex.ToString());
        Debug.Print("First column value = " + gRow.Cells[0].Text);
        DateTime? myDt = DateTime.Parse(gRow.Cells[1].Text);
        Debug.Print("2nd column value = " +  myDt.ToString());
    }

OutPut:

Row index click = 3
First column value = SR-71A.jpg
2nd column value = 2022-02-05 7:22:00 PM

How to tell which row number is clicked in a href in a table?

You can get index by using index()

$('table a').click(function(e) {  e.preventDefault(); // prevent default click action  alert($(this)    .closest('tr') // get the tr    .index() + 1 // get index based on siblings , add 1 since index start from 0  );})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><table>  <tr>    <td>1</td>    <td>1</td>    <td><a href="1" id='1' class 'alert'>1</a>    </td>  </tr>  <tr>    <td>2</td>    <td>2</td>    <td><a href="2" id='2' class 'alert'>2</a>    </td>  </tr>  <tr>    <td>3</td>    <td>3</td>    <td><a href="3" id='3' class 'alert'>3</a>    </td>  </tr></table>

Finding the table row number of a clicked row

Just put data-row-no attribut to every <tr>. Then from JavaScript call trow.getAttribute('data-row-no') to get current row.

...
 <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 </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'));
      }
  }
}
)();

How to find the row number in which button is clicked in jquery?

This might help u mate .. :)

Note:Jquery version >=1.7

$('body').on('click', 'button', function(event) {
        var rowindex = $(this).closest('tr').index();
        console.debug('Index', rowindex);
    });

FYI

index()

HTML table, clicked row's number

As you've tagged the question with jQuery, I'll give you a jQuery answer. You can get the index of the clicked row using jQuery's index method:

$("tr").click(function() {
   console.log($(this).index()); 
});

Inside the click event handler, you would be able to use the index method again to get the index of the currently selected row and compare them or do whatever you're trying to do.

how to get the row number from a table cell button click?

Using a class:

$(function(){  $('button.idna5').on('click',function(){         alert($(this).closest('tr').index())  })})

<table class="w3-table-all w3-margin-top" id="myTable"><tr>  <th style="width:22.5%;">Vendor Picture Path</th>  <th style="width:22.5%;">Vendor Heading</th>  <th style="width:22.5%;">Vendor Adding Date</th>  <th style="width:22.5%;">Vendor Body</th>  <th style="width:10%;">Add A Course</th></tr><tr>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td><button class="idna5">Add</button></td></tr><tr>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td><button class="idna5">Add</button></td></tr><tr>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td>Text</td>  <td><button class="idna5">Add</button></td></tr></table><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

Related Topics