如何从 JQuery 中的表中获取值？ [复制]答案

【问题标题】：How to get value from table in JQuery? [duplicate]如何从 JQuery 中的表中获取值？ [复制]
【发布时间】：2021-06-29 06:19:35
【问题描述】：

我有这张桌子：

<html>
  <body>
    <table id="user-table">
      <tr >
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"</script>
    <script src="get-users.js"></script>
    <script src="delete-user.js"></script>
  </body>
</html>

这是get-users.js 填充表格的文件：

let $userTable = $("#user-table");
let $xhr = $.ajax({
  method: "GET",
  url: "http://localhost:8080/user-rest-api",
  dataType: 'json'
});
    
$xhr.done(function (data) {
  for (let user of data) {
    $userTable.append(`
      <tr>
        <td> ${user.firstName}</td>,
        <td> ${user.lastName} </td>
        <td> <button class = 'delete-btn' value=${user.id}>Delete</button> </td>
      </tr>
    `);
  }
});

在delete-user.js 我只想打印用户ID，这就是我尝试过的：

$('#user-table').on('click', '.delete-btn', function () {
  let userId = $(".delete-btn").val();
  console.log("User ID : " + userId);
});

但它只打印第一个 id，如何根据点击的按钮动态获取值？

【问题讨论】：

尝试使用 $(this).val() 而不是 $(".delete-btn").val();
@osekmedia 谢谢，它有效。但这是从表中获取一些价值的正确方法吗？
虽然按钮可以有值（我不知道！）你最好通过数据属性传递（非表单输入）数据。 <button data-id='1' >click</button> 然后let id = $('button').data('id')
我同意@Kinglish，如果是我，我可能会使用数据标签，但两种方法都可以。如果你按照他的建议使用数据标签，你会想要使用 $(this).data('id');在您的点击中。

标签： javascript html jquery

【解决方案1】：

您必须在事件处理程序中使用关键字this 来捕捉被点击的按钮：

let userId = $(this).val();

工作示例：（带有一些虚拟数据和普通函数调用）

let $userTable = $("#user-table");
let users = [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    id: '2',
    firstName: 'Jane',
    lastName: 'Doe'
  }
];

function fillTable(data) {
  for (let user of data) {
    $userTable.append(`
      <tr>
        <td>${user.firstName}</td>,
        <td>${user.lastName} </td>
        <td><button class='delete-btn' value=${user.id}>Delete</button> </td>
      </tr>
    `);
  }
}

$('#user-table').on('click', '.delete-btn', function() {
  let userId = $(this).val();
  console.log("User ID: " + userId);
});

fillTable(users);

<table id="user-table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

或者，您可以使用createElement() 创建表格行和单元格。你甚至不需要 jQuery 并且可以使用纯 JavaScript 来完成。好处是可以直接在第一个函数中添加事件监听器。缺点是您没有事件委托和多个事件侦听器，每个按钮一个。

工作示例：

let $userTable = document.querySelector("#user-table");
let users = [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    id: '2',
    firstName: 'Jane',
    lastName: 'Doe'
  }
];

function fillTable(data) {
  for (let user of data) {
    let row = document.createElement('tr');
    let firstName = document.createElement('td');
    let lastName = document.createElement('td');
    let delete_button = document.createElement('button');

    firstName.textContent = user.firstName;
    lastName.textContent = user.lastName;
    delete_button.value = user.id;
    delete_button.textContent = 'Delete';
    delete_button.addEventListener('click', function() {
      let userId = this.value;
      console.log("User ID: " + userId);
    });

    row.appendChild(firstName);
    row.appendChild(lastName);
    row.appendChild(delete_button);
    $userTable.appendChild(row);
  }
}

fillTable(users);

<table id="user-table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
</table>

如果您想使用 jQuery，代码会变得更简单。

工作示例：

let $userTable = $("#user-table");
let users = [
  {
    id: '1',
    firstName: 'John',
    lastName: 'Doe'
  },
  {
    id: '2',
    firstName: 'Jane',
    lastName: 'Doe'
  }
];

function fillTable(data) {
  for (let user of data) {
    let row = $('<tr></tr>');
    let firstName = $('<td></td>');
    let lastName = $('<td></td>');
    let delete_button = $('<button></button>');

    firstName.text(user.firstName);
    lastName.text(user.lastName);
    delete_button.val(user.id).text('Delete').on('click', function() {
      let userId = $(this).val();
      console.log("User ID: " + userId);
    });

    row.append(firstName);
    row.append(lastName);
    row.append(delete_button);
    $userTable.append(row);
  }
}

fillTable(users);

<table id="user-table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

【讨论】：

感谢您花时间编写代码和解释，但这是从表格中获取价值的正确方法吗？
“正确的方式”是什么意思？有多种方法可以做到这一点 - 这是其中之一。如果您指定它，我可以回答...
我只是想知道是否有更多经验的人会以这种方式解决问题？
为什么不呢，它是极简主义和简单的，而且很有效。也许您可以使用createElement() 创建表格行和单元格。我将为第二个示例更新我的答案...
@NemJov - 正确的方式主要是主观的。例如，我喜欢将这样的 id 放入<tr> - 比如<tr data-id='1'>，因为它将整行与单个用户相关联。然后在按钮上单击<button class='del'>Delete</button> 我设置了一个监听器$('button.del').click(function(){ let id = $(this).closest('tr').data('id'); })