时间戳

首页 > 解决方案 > 如何从 JQuery 中的表中获取值？

javascript - 如何从 JQuery 中的表中获取值？

问题描述

我有这张桌子：

<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，我如何根据单击的按钮动态获取值？

标签： javascripthtmljquery

解决方案

您必须在事件处理程序中使用关键字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>

推荐阅读