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

Question

我需要从 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) 打印组名值 Test 1，如果我点击第二行按钮，它只显示 Test 1。但是如果我点击第二行按钮，我需要获取 Test 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>

Answer 1

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

• 查询选择器全部
• 为每个
• 添加事件监听器
• 最近的

片段：

 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>