HTML - 通过在同一行内按下按钮获取行ID

时间：2017-08-29 21:00:20

标签： javascript jquery html

假设我有一个HTML表，每行都有一些数据，一个更新和一个删除按钮。我希望通过单击“更新”按钮来检索此特定行的每个数据。我已经搜索了其他示例，但是他们中的大多数只是使用列ID遍历列，只打印了他们找到的每个单元格数据。在按下更新按钮时，我需要检索此行具有的所有当前单元格数据。我怎么能这样做？

JS小提琴 HERE 

Could not properly indent code after trying for more than 30mins so I gave up

3 个答案:

答案 0 :(得分：4)

您可以从以下位置更改html按钮：

<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>

为：

<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                                                                      ^^^^

将 this 关键字添加到要传递当前按钮的功能中。现在，为了获得相应的行，您可以使用jQuery.closest()：

var row = $(ele).closest('tr');

或使用普通的js .closest() 

var row = ele.closest('tr');

对于更新按钮，您可以添加点击处理程序：

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {

或使用普通的js .querySelectorAll()：

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....

jQuery片段：

＆＃13;
＆＃13; 
window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        alert("User wants to delete!");
        var row = $(ele).closest('tr');
        row.remove();
        return true;
    }
    else{
        alert ("User does not want to delete!");
        return false;
    }
}

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var row = $(this).closest('tr');
    console.log('TR first cell: ' + row.find('td:first').text());
})
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>vas@gmail.com</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>va1122s@gmail.com</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>
＆＃13;
＆＃13;
＆＃13;

根据Hossein Asmand的评论（我怎样才能使用Javascript？）一个完整的js解决方案如下：

＆＃13;
＆＃13; 
window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        var row = ele.closest('tr');
        console.log("User wants to delete: " + row.cells[0].textContent);
        row.remove();
        return true;
    }
    else{
        console.log("User does not want to delete!");
        return false;
    }
}

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        var row = this.closest('tr');
        console.log('TR first cell: ' + row.cells[0].textContent);
    });
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>vas@gmail.com</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>va1122s@gmail.com</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

按下按钮更新

后要检索行中的数据 
<button type="button" class="btn btn-warning" onclick="getData(this)">

window.getData = function(val) {
  let arr= [];

  val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
    if (item.getAttribute('class') != "text-center") {
      arr.push(item.innerHTML)
    }
  },this)
  console.log(arr); //["1", "John", "John", "vas@gmail.com", "1976", "USA", "Michigan"]
}

答案 2 :(得分：0)

来自@gaetanoM的答案将被接受。如果有人想要的方法不仅仅是获取id，而是获得完整的行数据，你可以试试这个：

HTML CODE：

更改此内容： 

<td>1</td>
<td>John</td>
<td>John</td>
<td>vas@gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>

到此： 

<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">vas@gmail.com</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>

JAVASCRIPT代码：

更改此内容： 

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var row = $(this).closest('tr');
    console.log('TR first cell: ' + row.find('td:first').text());
})

到此： 

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var id = $(this).closest('tr').find('.table_id').text();
    console.log("Id = " + id);
    var firstname = $(this).closest('tr').find('.table_firstName').text();
    console.log("First Name = " + firstname);
    var lastname = $(this).closest('tr').find('.table_lastName').text();
    console.log("Last Name = " + lastname);
    var email = $(this).closest('tr').find('.table_email').text();
    console.log("Email = " + email);
    var born = $(this).closest('tr').find('.table_born').text();
    console.log("Born = " + born);
    var country = $(this).closest('tr').find('.table_country').text();
    console.log("Country = " + country);
    var department = $(this).closest('tr').find('.table_departmentId').text();
    console.log("Department = " + department);
})

在 THIS 小提琴中查看结果。

再次感谢为寻找答案做出贡献的所有人!!!

相关问题
最新问题