Question

我有一个PHP生成的项目表。每行都有一个链接，单击该链接时，应使用其他信息扩展该行。

我尝试使用JQuery来获取数据并返回它，该方法有效-但仅适用于第一行。每行中的每个链接仅将数据返回到第一行。这是因为该行具有一个静态ID，这正是我要定位的目标。

我考虑过在PHP通过在其中放置变量来生成每一行时尝试分配动态ID，但是每当单击链接以使其定位时，我都需要让JQuery返回父td元素的ID。该特定行，但我不知道该如何处理。

AJAX功能

$(document).ready(function() {
  $("a.test").click(function(event) {
    $.post("includes/modal.php", { id: event.target.id }, function(response) {
      var ticket = document.createElement("p");
      ticket.innerText = response;
      document.getElementById('myDiv').appendChild(ticket);
    });
    $(document).ready(function(){
      $("button").click(function(){
        $('p').hide();
      });
    });
  });
});

PHP生成的行和列

echo "
  <tr>
    <td>$dateChange</td>
    <td>$ticketSubject</td>
    <td id='myDiv'>
      <a class='test' type='button' href='#' id=$ticketID>
         View Ticket
      </a>
      <button>Hide</button>
    </td>
    <td>$ticketState</td>
  </tr>";

我希望用户单击每一行上的链接，并使该行扩展为JQuery返回的新数据。

如果getElementById（）部分可以以某种方式提取适当的列ID（可以像这样动态分配），我可以设想此工作：

<td id=$postID>

我不知道这是否是解决此问题的最佳方法，但这是我目前的想法。我不知道有任何针对每个单击的唯一实例的JQuery方法。

Answer 1

将标记修改为：

echo "
  <tr>
    <td>$dateChange</td>
    <td>$ticketSubject</td>
    <td>
      <a class='test' type='button' href='includes/modal.php?id=$ticketID'>
         View Ticket
      </a>
      <button>Hide</button>
    </td>
    <td>$ticketState</td>
  </tr>";

在这里，我将href属性与所需页面的链接一起添加。我还删除了id='myDiv'，因为页面上的id 必须唯一。

在javascript中，您只需对此href进行POST请求：

$(document).ready(function() {
  $("a.test").click(function(event) {
    // $(this) gives you the clicked element as jQuery object
    $.post($(this).attr('href'), function(response) {
      // according to your markup you can do:
      $(this).parent().append('<p>' + response + '</p>');
      // Instead of these lines below
      /*var ticket = document.createElement("p");
      ticket.innerText = response;
      document.getElementById('myDiv').appendChild(ticket);*/
    });
    // return false to prevent default action on `a` click
    return false;

    // I don't know what you expect when put `ready` into `ready`
    /*$(document).ready(function(){*/
      $("button").click(function(){
        $('p').hide();
      });
    /*});*/
  });
});

Answer 2

您需要在div中id说$ticketID时添加唯一编号

echo "
<tr>
<td>$dateChange</td>
<td>$ticketSubject</td>
<td id='myDiv$ticketID'>
  <a class='test' type='button' href='#' id=$ticketID>
     View Ticket
  </a>
  <button>Hide</button>
</td>
<td>$ticketState</td>
</tr>";

在您的JQuery中

$(document).ready(function() {
$("a.test").click(function(event) {
$.post("includes/modal.php", { id: event.target.id }, function(response) {
  var ticket = document.createElement("p");
  ticket.innerText = response;
  document.getElementById('myDiv'+event.target.id).appendChild(ticket);
});
$(document).ready(function(){
  $("button").click(function(){
    $('p').hide();
  });
});
});
});

希望有帮助！

针对单个锚元素的AJAX

AJAX功能

PHP生成的行和列

2 个答案: