Javascript 针对单个锚元素的AJAX

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

我尝试使用JQuery获取数据并返回它，这很有效——但只适用于第一行。每行中的每个链接仅将数据返回到第一行。这是因为此行有一个静态ID，这就是我的目标

我曾考虑在PHP生成每一行时，通过在其中放置一个变量来分配一个动态ID，但我需要让JQuery在每次单击链接时返回父td元素的ID，以便它以该特定行为目标，但我不知道如何执行此操作

AJAX函数 PHP生成的行和列 回响 $dateChange $ticketSubject 隐藏 $ticketState ; 我希望用户单击每一行上的链接，并使用JQuery返回的新数据展开该行

如果getElementById部分能够以某种方式提取适当的列id，则可以想象这种情况，该列id将被动态分配，如下所示：

我不知道这是否是最好的方法，但这是我目前的想法。我不知道有哪种JQuery方法针对每个单击的唯一实例。

将您的标记修改为：

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>";

---

您需要在您的div id中添加唯一的号码，比如$ticketID

---

希望有帮助

您可以将唯一ID用于行True，只是想确保OP知道，如果他们试图将其用于其他用途，它们必须是唯一的。修复了使用相同ID的部分，谢谢@JayBlanchard

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>";

$(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();
      });
    /*});*/
  });
});

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>";

$(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();
  });
});
});
});