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

【问题标题】：how to get the row number from a table cell button click?如何从表格单元格按钮单击中获取行号？
【发布时间】：2017-01-22 19:11:15
【问题描述】：

我在 js 上度过了一段非常艰难的时光。它需要我一天的时间来解决一个问题。我不知道我什么时候会度过这段艰难的时光。我只是想从表格单元格中获取表格行号button.means 认为一个表有 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
    }

如果你们能帮帮我

【问题讨论】：

你的 js 尝试的输出是？
第一个输出什么都没有，第二个总是显示 0

标签： javascript php jquery mysql

【解决方案1】：

使用类：

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

调用函数，就像您在代码中使用的那样：

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>

【讨论】：