Question

我正在开发一个脚本，根据搜索结果从SQL表中打印HTML表。如果特定字段的值不是1，则表格将打印一个按钮。因此，在不同的搜索结果中，表格上可能会打印各种按钮。按下按钮时，该字段的值应通过AJAX调用更新为1。

这是打印表格的PHP代码：

echo "<title>Search Results</title>";
     if (!$query->rowCount() == 0) {
        echo '<table style=\"width:100%\"><tr>
            <th class="text-left">Name</th>
        <th class="text-left">Paper 1 Signed?</th>
        <th class="text-left">Paper 2 Signed?</th>
        <th class="text-left">Paper 3 Signed?</th>
            </tr><br>';
      while ($results = $query->fetch()) {
                      $ID         = $results['ID'];
                      $Name       = $results['Name'];
                      $paper1     = $results['paper1'];
                      $paper2     = $results['paper2'];
                      $paper3     = $results['paper3'];

            echo '<tr>', //print the first column
          '<td class="text-left">',$Name,'</td>'

   //print the 3 remaining columns, depending on their values in the SQL table. If 1, show text. If not 1, print a submit button.

          if ($question1 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper1\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;} // 

          if ($paper2 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper2\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;}

          if ($paper3 == '1') {echo "<td class=\"text-left\">Signed!</td>";}
          else {echo "<form id=\"update\" method=\"POST\" action=\"\" ><td class=\"text-left\">
          <input type=\"hidden\" id=\"field_update\" value=\"paper3\"/>
          <input type=\"hidden\" id=\"ID\" value=\"" . $ID . "\"/>
          <input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\"></form></td>" ;}

            echo "</tr>" ;
             ;   
   } 
   echo '</tbody></table></body></html>';  
    } else {
        echo 'Nothing found';
    }

请注意最后三个部分：这是我打印表格最后3列的位置，显示纸张1，纸张2和纸张3是否已签名。如果是（= 1），那么我会显示文字＆＃34;签名！＆＃34;如果没有（！= 1），那么我打印一个更新按钮。

更新（提交）按钮连接到用JQuery / AJAX编写的saveData（）onclick函数。

<!-- function update -->
<script type="text/javascript">
    function saveData(){
        var field_update = document.getElementById("field_update").value; 
        var ID = document.getElementById("ID").value;
        var dataString = 'field_update=' + field_update + '&ID=' + ID;
        $.ajax({
          type: "POST",
          url: "update-ajax.php",
          data: dataString,
          cache: false,
          success:function( html ) {
           alert( html );

          }
         });
    }

我的问题如下：函数中的var值总是转到第一行的值...这是因为表中每个列元素的字段ID都是相同的..所以函数总是使用第一组结果。

我可能会运行一个循环来为每一行和单元格打印不同的javascript函数......但这样效率会非常低。

我知道必须有一个更好的方法，但在这里摸不着头脑。任何帮助将不胜感激。

Answer 1

它获取第一行值的原因是因为您使用的ID不是唯一的。由于你使用的是jquery，你可以这样做。

$('input[type=submit]').on('click',function() {

});

这会将此回调函数附加到页面中的所有提交按钮。现在要知道在回调函数中使用什么值，我建议你使用jQuery的data()函数和data-*属性。这样的事情。

      "<input type=\"submit\" id=\"submit\" onclick=\"saveData()\" value=\"Mark as Signed\" data-id=\". $ID. \"></form></td>" ;}

注意data-id=$ID位。现在，您可以使用

在回调函数中访问此ID

$(this).data('id')

将自动获取data-id属性的值。不需要独特的ids并跳过篮球！

Answer 2

使用＆＃39; a _＆＃39;，＆＃39; b _＆＃39;和＆＃39; c _＆＃39;前缀您的ID。并且您可以轻松地拆分javascript字符串以在AJAX调用中获得正确的id。

对于未经请求的建议，学习一个模板系统，它会使你的代码难以阅读。

搜索结果页面具有相同字段ID名称时的Ajax功能

2 个答案: