javascript - 如何从表格单元格按钮单击中获取行号？

Question

我在 js 上度过了一段非常艰难的时期。它花了我一天的时间来解决一个问题。我不明白我什么时候才能度过这段艰难的时期。我只是想从表格单元格中获取表格行号按钮。意味着认为一个表有 5 行，这些数据是从数据库中获取的。每行都包含一个按钮。如果我单击一个按钮，它将返回或显示该按钮所属的行号。 我的 html 和 php 代码----

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:22.5%;">Vendor Picture Path</th>
  <th style="width:22.5%;">Vendor Heading</th>
  <th style="width:22.5%;">Vendor Adding Date</th>
  <th style="width:22.5%;">Vendor Body</th>
  <th style="width:10%;">Add A Course</th>
</tr>
<?php

mysql_connect("host", "user", "pass")or die("cannot connect to server"); 
    mysql_select_db("db name")or die("cannot select DB");
    $sql = "sql";
    $result = mysql_query($sql);

    while($row=mysql_fetch_assoc($result))
    {
         echo '<tr>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["pic_path"].'</div></td>             
         <td><div onclick="getval(this)" class="cventablehead" id="ventablehead" style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll; cursor: pointer; color:red;">'.$row["heading"].'</div></td>
         <td>'.$row["adding_date"].'</td>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
         <td><button onclick="idna5(this)">Add</button></td>
         </tr>';
    }
?>
  </table>

我的js代码----

    function idna5(obj)
    {
       //alert(obj.index());--1st try
       alert($(obj).index());---2nd try
    }

如果你们可以帮助我

Answer 1

Using a class:

$(function(){
  $('button.idna5').on('click',function(){
         alert($(this).closest('tr').index())
  })
})

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:22.5%;">Vendor Picture Path</th>
  <th style="width:22.5%;">Vendor Heading</th>
  <th style="width:22.5%;">Vendor Adding Date</th>
  <th style="width:22.5%;">Vendor Body</th>
  <th style="width:10%;">Add A Course</th>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button class="idna5">Add</button></td>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button class="idna5">Add</button></td>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button class="idna5">Add</button></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Calling a function as you used in your code:

function idna5(el){
	alert($(el).closest('tr').index())
}

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:22.5%;">Vendor Picture Path</th>
  <th style="width:22.5%;">Vendor Heading</th>
  <th style="width:22.5%;">Vendor Adding Date</th>
  <th style="width:22.5%;">Vendor Body</th>
  <th style="width:10%;">Add A Course</th>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button onclick="idna5(this)">Add</button></td>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button onclick="idna5(this)">Add</button></td>
</tr>
<tr>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td>Text</td>
  <td><button onclick="idna5(this)">Add</button></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>