How can I grab the index with JS?

Question

 .tb button { width: 100px; height: 100px; border-radius: 50%; background-color: gray; border: 3px solid black; margin: 1px; } body { text-align: center; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="container"> <h1>Welcome to Connect Four:</h1> <p>The object of this game is to connect four of your chips in a row,</p> <p id="inp">.it is your turn: please pick a column to drop your blue chip.</p> <table class="tb" align="center"> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> </table> </div> <script src="https.//code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

I want to make the function that returns the index of a clicked button with JQuery. In addition to that, I want to make use of the index later for other functions. For example, if I click the index number 0 button on Google Chrome, I want the function to return 0. How can I make the function with JavaScript? I am a beginner, therefore plain coding would be happy for me.

Answer 1

You can use $(this).parent('th').index() for get column index

and $(this).closest('tr').index() for row index

also should use tr instead thead tag

   $("button").click(function() {
    var col_index = $(this).parent('th').index();
    var row_index = $(this).closest('tr').index();
    alert(row_index + "-" + col_index);
});

 $("button").click(function() { var col_index = $(this).parent('th').index(); var row_index = $(this).closest('tr').index(); alert(row_index + "-" + col_index); });

 .tb button { width: 100px; height: 100px; border-radius: 50%; background-color: gray; border: 3px solid black; margin: 1px; } body { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="container"> <h1>Welcome to Connect Four:</h1> <p>The object of this game is to connect four of your chips in a row,</p> <p id="inp">.it is your turn: please pick a column to drop your blue chip.</p> <table class="tb" align="center"> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> </table> </div> <script src="https.//code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Answer 2

Since you're using jQuery, you can use the index() function.

You can define a global variable, for instance buttonIndex , and when a button is pressed save the index value in that variable:

let buttonIndex;

$('button').click( function() {
    buttonIndex = $(this).index();
});

Now you can use buttonIndex in other functions as well. This is the solution if you want the index relative to all the buttons in your page.

Hope this helps.

Answer 3

You can add the id to the button and then on click you can use that id

For eg

<table>
      <thead >
        <th><button id="0-0" type="button" name="button" ></button></th>
        <th><button id="0-1" type="button" name="button"></button></th>
        ...
      </thead><br>
      <thead >
        <th><button id="1-0" type="button" name="button"></button></th>
        <th><button id="1-1" type="button" name="button"></button></th>
        ...
      </thead><br>
...
</table>

Your Javascript Code will be

$("button").click(function() {
    alert(this.id); // or alert($(this).attr('id'));
});