I am not getting any alert message

Question

I am trying to get the row index of a table with the help of jquery using the alert function but I am not able to get any output . When I click on the edit button there is no action

<html>
<head>
<script type="text/javascript">
    function check(){
        $("table tr").click(function() {
            alert( this.rowIndex );  // alert the index number of the clicked row.
        });
    }
</script>
</head>
 <table>
    <tr>
     <td> <input type="button" name="test" value="Edit" id="amol" onclick="check();"/> </td>
    </tr>
 </table>
</html>

Please help me with this!

since there is no jQuery included in the page `function check(el) { alert(el.rowIndex); // alert the index number of the clicked row. }` then `onclick="check(this);"` will do — Arun P Johny, Dec 03 '14 at 07:25
$("table tr") this searches an element with id "table tr", not a type as it is. — Emre Acar, Dec 03 '14 at 07:26

score 0 · Answer 1 · answered Dec 03 '14 at 07:28

The code

$("table tr").click(function() 
{
  alert( this.rowIndex );  // alert the index number of the clicked row.
});

Sets a handler for when you click on the table row. But this in turn is set in a function, which is called when you click. You would need to run the handler. Try:

$(document).ready(function() {
  $("table tr").click(function() 
  {
    alert( this.rowIndex );  // alert the index number of the clicked row.
  });
});

So that it sets the handler on the row of the table, then anytime you click, it will show the alert, without the "onclick". You would just need:

<table>
  <tr>
    <td> <input type="button" name="test" value="Edit" id="amol"/> </td>
  </tr>
</table>

Amit Singh · Accepted Answer · 2014-12-03T07:35:48.803

The jQuery Solution:

First you need to put this in the <head> of the markup : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Change:

<input type="button" name="test" value="Edit" id="amol" onclick="check();"/>

To:

<input type="button" name="test" value="Edit" id="amol"/>

And jQuery snppet be like:

$(document).ready(function () {
    $("table tr").click(function () {
        alert(this.rowIndex); // alert the index number of the clicked row.
    });
});

Working Fiddle

score 0 · Answer 3 · answered Dec 03 '14 at 07:30

Your logic is wrong. You don't need to define a check function and use the onclick attribute. You just need the $("table tr").click(... part. Here's a sample:

$("table tr").click(function() 
{
    alert( this.rowIndex );  // alert the index number of the clicked row.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td> <input type="button" name="test" value="Edit" id="amol" /> </td>
  </tr>
</table>

score 0 · Answer 4 · edited Dec 03 '14 at 07:57

Hey!! you forget to include jquery.just add jquery link.

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    function check(){
       $("table tr").click(function(){
         alert( this.rowIndex );  // alert the index number of the clicked row.
       });
    }
</script>
</head>
   <table>
    <tr>
      <td> <input type="button" name="test" value="Edit" id="amol" onclick="check();"/></td>
    </tr>
   </table>
</html>

score 0 · Answer 5 · answered Dec 03 '14 at 07:33

First of all: you are missing jquery library, so please include it:)

I had found two solutions, generic and simple:

Generic:

below snippet should print row and cel index for clicking on table cell.

$(document).ready(function() {
    $("table > tbody > tr > td input").click(function() {
     var row_index = $(this).closest('tr').index();
     var col_index = $(this).closest('td').index();
     alert( row_index  +' ' +  col_index );  // alert the index number of the clicked row.
    });
}});

Simple: This one will print row and cell index for given amol button.

$(document).ready(function() {
  $("#amol").click(function() {
   var row_index = $(this).closest('tr').index();
   var col_index = $(this).closest('td').index();
   alert( row_index  +' ' +  col_index );  // alert the index number of the clicked row.
  });
}});

I would not advise to add it as an click action, because with each click, you will add an onclick event. It's better to do it once on page load, with jQuery, like in above example.

Thirdly remember that id must be unique in DOM page, so if there is only one edit button-it's ok, but if there is an edit for each row -replace it with a css class.

score 0 · Answer 6 · answered Dec 03 '14 at 13:11

just add the reference of jquery in the header tag

<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    function check(){
       $("table tr").click(function(){
         alert( this.rowIndex );  // alert the index number of the clicked row.
       });
    }
</script>
</head>

this is a link for you to get started with jquery library

I am not getting any alert message

6 Answers6