Как получить индекс нажатой кнопки из сетки кнопок?

Question

Это мой HTML ...

$("table tr button").on('click', function(e) {
  var i = $(this).closest('td').parent()[0].sectionRowIndex;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">


  <tr>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

  </tr>

  <tr>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>
    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

    <td><button class="button"></button></td>

  </tr>
</table>

Я пытался получить индекс нажатой кнопки.

Но я получаю ошибку ... пожалуйста, кто-нибудь, скажите мне, как это сделать.

Answer 1

Вы можете использовать closest и index из jquery. У каждой строки будет индекс, начинающийся с 0, а индекс кнопки будет относиться к этой строке.

Также вы можете делегировать событие от table кнопке, заменив $("table tr button").on('click', function(e) { на $("table").on('click', 'button', function(e) {

$("table").on('click', 'button', function(e) {
  var rowIndex = $(this).closest('tr').index();
  var colIndex = $(this).closest('td').index()
  console.log(`Row index is ${rowIndex} & button index is ${colIndex}`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">


  <tr>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

  </tr>

  <tr>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>
    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

    <td><button class="button">Click</button></td>

  </tr>
</table>

Answer 2

Вы можете сохранить значение индекса в атрибутах данных обычного типа, как показано ниже

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">


  <tr>
    <td><button data-index='0' class="button">Click</button></td>
    <td><button data-index='1' class="button">Click</button></td>
    <td><button data-index='2' class="button">Click</button></td>
    <td><button data-index='3' class="button">Click</button></td>

    <td><button data-index='4' class="button">Click</button></td>

    <td><button data-index='5' class="button">Click</button></td>

  </tr>

  <tr>
    <td><button data-index='6' class="button">Click</button></td>
    <td><button data-index='7' class="button">Click</button></td>
    <td><button data-index='8' class="button">Click</button></td>
    <td><button data-index='9' class="button">Click</button></td>

    <td><button data-index='10' class="button">Click</button></td>

    <td><button data-index='11' class="button">Click</button></td>

  </tr>
</table>

тогда после нажатия на кнопку вы можете получить значение индекса через jquery, как это

$('.button').click(function(){
    let index = $(this).data('index');

    console.log(index);

});

Answer 3

Поскольку вы используете jQuery, вы можете просто использовать метод index(), например:

Индекс кнопки в строке / таблице:

$("table tr button").on('click', function(e) {
  var index_in_row   = $(this).closest('td').index();
  var index_in_table = $('button').index($(this));

  console.log('Index of the button in row: ' + index_in_row);
  console.log('Index of the button in table: ' + index_in_table );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab">
  <tr>
    <td><button class="button">button 0</button></td>
    <td><button class="button">button 1</button></td>
    <td><button class="button">button 2</button></td>
    <td><button class="button">button 3</button></td>
  </tr>
  <tr>
    <td><button class="button">button 4</button></td>
    <td><button class="button">button 5</button></td>
    <td><button class="button">button 6</button></td>
    <td><button class="button">button 7</button></td>
  </tr>
</table>