时间戳

首页 > 解决方案 > 如何从 php 循环中使用 javascript/jquery 获取动态 id

javascript - 如何从 php 循环中使用 javascript/jquery 获取动态 id

问题描述

我在数据库中有两个表，它们通过外键“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();
   }
 }

标签： javascriptphpjqueryajax

解决方案

这里是溶胶。

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

推荐阅读