как получить индекс элемента tfoot(класса aArea) по нажатию кнопки внутри него?

Рейтинг: 2Ответов: 1Опубликовано: 14.07.2023

Тут 3 элемента tfoot, по идее нужно, чтобы показывало 0 при нажатии на первую и вторую кнопку, и 1 при нажатии на третью и четвертую кнопку. Но по итогу показывает 3 и 4

var array = $(".aArea");
console.log(array.length + " длина");
$(".aBtn").click(function(){
var index = $(this).closest('.aArea').index();
console.log(index);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>canvasExample</title>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="myDiv">
      <table
        class="table table-hover table-bordered"
        id="myTable"
        cellspacing="5"
        cellpadding="10"
      >
        <thead>
          </thead>
          <tfoot>
      пустой
        </tfoot>
          <tbody>
        <tfoot class="aArea">
        <tr>
        <td ><button class="aBtn">Кнопка1</button></td>

        <td >1 tfoot</td>
        </tr>
        
        <tr>
        <td ><button class="aBtn">Кнопка2</button></td>

        <td >1tfoot</td>
        </tr>
        </tfoot>
        
        <tfoot class="aArea">
        <tr>
        <td ><button class="aBtn">Кнопка3</button></td>

        <td >2tfoot</td>
        </tr>
        
        <tr>
        <td ><button class="aBtn">Кнопка4</button></td>
        <td >2tfoot</td>
        </tr>
        </tfoot>
        
        
         </tbody>
         
      </table>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
    <style>
        * {
            white-space:nowrap;
        }
        
        .aBtn{
width: -webkit-fill-available; 
}
    </style>
  </body>
</html>

Если кому-то удобнее смотреть код здесь -> https://jsfiddle.net/nzrytdqg/

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Тут 3 элемента tfoot, по идее нужно, чтобы показывало 0 при нажатии на первую и вторую кнопку, и 1 при нажатии на третью и четвертую кнопку

Предложу вот такой вариант решения...

$("#myDiv .aBtn").click(function() {
  const o = $(this).parents('tfoot')
  const i = $("tfoot").index(o) - 1
  console.log("tfoot " + i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title>canvasExample</title>
  <meta charset="utf-8" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
</head>

<body>
  <div id="myDiv">
    <table class="table table-hover table-bordered" id="myTable" cellspacing="5" cellpadding="10">
      <thead>
      </thead>
      <tfoot>
        пустой
      </tfoot>
      <tbody>
        <tfoot class="aArea">
          <tr>
            <td><button class="aBtn">Кнопка1</button></td>
            <td>1 tfoot</td>
          </tr>

          <tr>
            <td><button class="aBtn">Кнопка2</button></td>

            <td>1tfoot</td>
          </tr>
        </tfoot>

        <tfoot class="aArea">
          <tr>
            <td><button class="aBtn">Кнопка3</button></td>
            <td>2tfoot</td>
          </tr>

          <tr>
            <td><button class="aBtn">Кнопка4</button></td>
            <td>2tfoot</td>
          </tr>
        </tfoot>
      </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <style>
      * {
        white-space: nowrap;
      }
      
      .aBtn {
        width: -webkit-fill-available;
      }
    </style>
</body>

</html>