当我在另一个 jQuery 中单击打开表中的表链接时，表中的数据 - JavaScript

在本文中，我们将介绍如何在jQuery中单击打开表中的链接，并获取表中的数据。这是一个常见的问题，特别是在需要动态加载数据的Web应用程序中。

问题

假设我们需要在一个表格中显示数据，并使用jQuery打开表中的链接。如何获取表中的数据并在另一个页面中显示它们？

解决方案

HTML

让我们先看一下HTML代码，我们将使用以下表格：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><a href="#" data-id="1" class="view-data">View</a></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>jane.doe@example.com</td>
      <td><a href="#" data-id="2" class="view-data">View</a></td>
    </tr>
  </tbody>
</table>

这是一个简单的表格，其中包含了三列数据：姓名、电子邮件和操作。我们将使用“操作”列中的链接打开一个新页面，并在新页面中显示选择的行的数据。

请注意，我们使用了data-id属性来存储每一行的唯一标识符。这个标识符将在稍后使用，以便我们能够识别要显示的数据。

jQuery

现在让我们看一下jQuery代码。我们将使用以下代码：

$(document).ready(function() {
  // When the "View" link is clicked, open the page and pass the ID
  $('.view-data').click(function(event) {
    event.preventDefault();
    var id = $(this).data('id');
    window.open('view-data.html?id=' + id, '_blank');
  });
});

这个代码非常简单。当点击“View”链接时，它将阻止默认的行为，并获取data-id属性的值。然后，它将打开一个新页面，并将ID作为查询字符串参数传递过去。

获取数据

现在，在新页面中获取数据。我们将使用以下代码：

$(document).ready(function() {
  // Get the ID from the query string
  var id = getUrlParameter('id');

  // Get the data
  var data = getDataById(id);

  // Display the data
  $('#name').text(data.name);
  $('#email').text(data.email);
});

function getUrlParameter(name) {
  var regex = new RegExp('[?&]' + name + '=([^&#]*)');
  var results = regex.exec(location.search);
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

function getDataById(id) {
  // This could be an AJAX call to the server, but for simplicity we'll just hardcode the data
  var data = [
    {id: 1, name: 'John Doe', email: 'john.doe@example.com'},
    {id: 2, name: 'Jane Doe', email: 'jane.doe@example.com'}
  ];
  
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      return data[i];
    }
  }

  return null;
}

首先，我们需要获取查询字符串中的ID。我们可以使用getUrlParameter()函数来获取它。这个函数将返回一个字符串，其中包含ID的值。

然后，我们使用getDataById()函数来获取数据。这个函数将在数据中查找与ID匹配的行，并返回它们的数据。

最后，我们使用jQuery来显示数据。我们将简单地将文本添加到HTML元素中，但是这里的显示方法将取决于您正在创建的Web应用程序。

总结

在本文中，我们介绍了如何在jQuery中单击打开表中的链接，并获取表中的数据。您可以在自己的Web应用程序中使用这个技术来动态加载数据，而不需要刷新整个页面。