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

Question

我正在经历一段非常艰难的时光，js.its花了我一天的时间来解决一个问题。我不知道什么时候我将通过这个困难的时间。我只是想知道从表格单元格获取一个表格行号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
    }

如果你们可以请帮助我

Answer 1

  

使用课程：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  您在代码中使用

调用函数：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;