时间戳

首页 > 解决方案 > 如何用 JS 抓取索引？

javascript - 如何用 JS 抓取索引？

问题描述

.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>

我想使用 JQuery 创建返回单击按钮的索引的函数。除此之外，我想稍后将索引用于其他功能。例如，如果我单击 Google Chrome 上的索引号 0 按钮，我希望函数返回 0。如何使用 JavaScript 制作函数？我是初学者，因此简单的编码对我来说会很高兴。

标签： javascriptjquery

解决方案

您可以$(this).parent('th').index()用于获取列索引

对于行$(this).closest('tr').index()索引

也应该使用tr代替thead标签

   $("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>

推荐阅读