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

时间:2018-06-04 12:07:18

标签: javascript php jquery ajax

我在数据库中有两个表,它们使用外键相互连接" 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();
   }
 }

3 个答案:

答案 0 :(得分:0)

首先,您应该分解代码,以便更好地阅读:

<?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')
});

答案 1 :(得分:0)

将课程设置为按钮&amp; td其中id可用

[Code]
function Activation(key: WideString): Boolean;
external 'Activation@files:ClassLibrary1.dll stdcall';

function InitializeSetup(): Boolean;
var status: Boolean;
begin
status := Activation('1a2b3c');
   case status of
   true: msgbox('true', mbInformation, MB_OK);
   false: msgbox('false',mbInformation, MB_OK);
   end;
Result := status; 
end;

答案 2 :(得分:0)

这是sol。

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