使用 Jquery/Javascript 根据按钮单击获取表行值

Posted 2023-05-09

【中文标题】使用 Jquery/Javascript 根据按钮单击获取表行值

【英文标题】：Get table row value based on button click using Jquery/Javascript

【发布时间】：2021-06-02 06:04:51

【问题描述】：

我需要从 onclick 事件中获取表格行值。在表格下方，我正在使用

Group name|Manage group

Test 1    | Button

Test 2    | Button

如果我从表格行中单击“按钮”，我需要从表格行中获取相应的组名值。

在脚本下面，我正在尝试。但它只打印两个按钮的第一个组名称值“Test 1”。

var table = document.getElementById("user_table");
       var rows = table.rows;
       for (var i = 1; i < rows.length; i++) 
           rows[i].onclick = (function (e) 
               var rowid = (this.cells[0].innerhtml);
               var j = 0;
               var td = e.target;
               while( (td = td.previousElementSibling) != null ) 
                   j++;
               alert(rows[1].cells[j].innerHTML);
           );
       

alert(rows[1].cells[j].innerHTML) 打印组名称值测试 1，如果我单击第二行按钮，它只显示测试 1。但是如果我单击第二行按钮，我需要获取测试 2 .

HTML 文件

<table id="user_table"  style='overflow-x:scroll;overflow-y:scroll;width:100%;height:auto' class="table table-bordered" >
 <thead>
 <tr class="info">
   <th>Group Name</th>
   <th>User Group</th>

 </tr>
 </thead>
 <tbody id="table_body">
 <br>
 
   <% @array.each do |user| %>
   <tr>
   
     <td >
       <%=user['group_name']%>
     </td>
       <td>
         <button id='manageusrbtn' name="button" type="button" class="editbtn" onclick="manageUserGroups()" style="background-color: #008CBA; color: white; border-radius: 6px;" >Manage User Groups</button>
       </td>
        
     <% end %>
   </tr>
 </tbody>
 </table>

【问题讨论】：

alert(rows[1].... 您似乎已将测试警报硬编码到第 1 行

是的。如何从其他表行中获取值。我尝试添加 i 而不是硬编码值。但它不起作用

没有 html 和标记 [jquery]，我会给 td 你想要一个类并做 $(this).find("td.groupname").text() 但看看你的代码，看起来应该只是 alert(rowid)

也添加了我的 html

将事件添加到您的 按钮 是最有意义的，但是从您的代码 alert(rowid) 可以满足您对 jsfiddle.net/1tw7jqp9/1 的要求

【参考方案1】：

我建议将 click 事件处理程序附加到按钮而不是每个单元格。 为此，您可以使用：

querySelectorAll forEach addEventListener closest

sn-p：

var table = document.querySelectorAll('#user_table tr button');
table.forEach(function(ele) 
    ele.addEventListener('click', function (e) 
        var rowid = (this.closest('td').previousElementSibling.innerHTML);
        console.log(rowid);
    )
);

<table id="user_table">
    <tr>
        <th>Group name</th>
        <th>Manage group</th>
    </tr>
    <tbody>
    <tr>
        <td>Test 1</td>
        <td><button>Button</button></td>
    </tr> <tr>
        <td>Test 2</td>
        <td><button>Button</button></td>
    </tr>
    </tbody>
</table>