时间戳

首页 > 解决方案 > 使用 Jquery/Javascript 根据按钮单击获取表行值

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

问题描述

我需要从 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>

标签： javascriptjqueryruby-on-rails

解决方案

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

片段：

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>

推荐阅读