如何从php循环使用javascript / jquery获取动态ID

Question

我在数据库中有两个表，这些表通过外键“ pid”相互连接。

我想显示项目表，当我单击一个项目以显示数据库中另一个表的某些详细信息时（外键）。 我正在尝试与Ajax合作。 问题在于表的一部分在一个文件中，而另一部分在另一文件中（ajax处理）。 我正在尝试放置动态ID，但我不知道如何使用javascript / jquery获取特定ID。

这是代码：

     <table class="table table-condensed" style="border-collapse:collapse;">
        <thead>
          <tr>
            <th></th>
            <th style="font-style:italic;">NO</th>
            <th style="font-style:italic;">STATUS</th>
            <th style="font-style:italic;">PROJECT NAME ACTIVITIES</th>
            <th style="font-style:italic;">OBJECTIVES/NOTES</th>
            <th style="font-style:italic;">RESPONSIBLE</th>
            <th style="font-style:italic;">START DATE</th>
            <th style="font-style:italic;">COMPLETED DATE</th>
            <th style="font-style:italic;">DURATION</th>
            <th style="font-style:italic;">COMPLETED</th>
          </tr>
        </thead>
        <tbody>
          <?php $x = 0; foreach ($projects as $project){
            echo "<tr data-toggle=\"collapse\" data-target=\".demo$x\" class=\"accordion-toggle\">
              <td><button onclick='showTimeline()'>click</button></td>
              <td id=\"pid$x\">$project[pid]</td>
              <td>$project[status]</td>
              <td>$project[project_title]</td>
              <td>$project[notes]</td>
              <td>$project[responsible]</td>
              <td>$project[start_date]</td>
              <td>$project[completed_date]</td>
              <td>$project[duration]</td>
              <td>$project[completed]</td></tr>
              <div id='txtHint$x'></div>";
             $x++;}
            ?>
        </tbody>
    </table>

 function showTimeline(a,i) {
  var pid=document.getElementById("pid"+i).value;
  if (id == "") {
      document.getElementById("textHint"+i).innerHTML = "";
      return;
  } else {
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              document.getElementById("txtHint"+i).innerHTML = xmlhttp.responseText;
          }
      };
      alert(pid);
      xmlhttp.open("GET","ajax_test.php?q="+pid,true);
      xmlhttp.send();
   }
 }

Answer 1

首先，您应该分拆您的代码，以使其读起来更好：

<?php foreach ($data as $key => $value) : ?>
    <tr>
        <td><?php echo $value['example']; ?>
    </tr>
<?php endforeach; ?>

要定位动态创建的元素，您需要使用$(document) 。 原因是jQuery可在文档加载时使用DOM，而未添加任何内容。

这样定位：

$(document).on('event', '#my-dynamic-id', function()
{
    alert('clicked dynamic element')
});

Answer 2

将类别设置为按钮和TD（如果有ID）

 $(document).on("click", "button", function(){ var pid = $(this).closest("tr").find(".class name of td where id available").html(); }); 

Answer 3

这是溶胶。

  <tbody> <?php $x = 0; foreach ($projects as $project){ echo "<tr data-toggle=\\"collapse\\" data-target=\\".demo$x\\" class=\\"accordion-toggle\\"> <td><button onclick='showTimeline()' data-pid='<?php echo $project[pid]; ?>'>click</button></td> <td id=\\"pid$x\\">$project[pid]</td> <td>$project[status]</td> <td>$project[project_title]</td> <td>$project[notes]</td> <td>$project[responsible]</td> <td>$project[start_date]</td> <td>$project[completed_date]</td> <td>$project[duration]</td> <td>$project[completed]</td></tr> <div id='txtHint$x'></div>"; $x++;} ?> </tbody> 

 function showTimeline(a,i) { var pid=$(this).data('pid');; if (pid == "") { document.getElementById("textHint"+i).innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint"+i).innerHTML = xmlhttp.responseText; } }; alert(pid); xmlhttp.open("GET","ajax_test.php?q="+pid,true); xmlhttp.send(); } }