单击行按钮时，在表格行内追加/添加 <div> 标签 jquery/php

Question

我有一个带有文件夹路径的表格，每个表格行内都有一个按钮。当在一行中单击按钮时，路径会发送到一系列 php 文件（ajax.php、ajax2.php、ajax3.php）。 ajax3.php 完成后，会创建一个 pdf 报告，并且 pdf_report.php 会显示该报告。

问题：我找不到在单击按钮的行内显示 pdf 报告的方法。当我点击“运行”时，pdf 报告会显示在所有行上。

我的代码如下：

search.php

        <?php
        ...
        while($row = $result->fetch_assoc()){
            $field1name = $row["test_id"];
            $field2name = $row["path"];
            $field3name = $row["video1_path"];
            $field4name = $row["video2_path"];
            $field5name = $row["video3_path"];
            $field6name = $row["video4_path"];

          echo "<tr>
                  <td> ".$field1name." </td>
                  <td> ".$field2name." </td>
                  <td> ".$field3name." </td>
                  <td> ".$field4name." </td>
                  <td> ".$field5name." </td>
                  <td> ".$field6name." </td>

                  <td><div>
                        <button class='edit' id='" . $row['test_id'] . "'>Run</button>
                      </div></td>


                  <td><div class= 'result' id='" . $row['test_id'] . "'>
                    <p></p>
                  </div></td>

                </tr>";
        }
      }else {
        echo '<span style="color:#ff0000;text-align:center;">No Test ID Selected!</span>';
      }
    }


    // Close connection
    mysqli_close($conn);
  ?>
  </table>
</div><br>

<div style="overflow-x:auto;">
<table id=test_data>
  <tr>
    <th>Progress</th>
    <th>Progress Status</th>
  </tr>
  <tr>
    <td><div><progress id='progBar' value='0' max='100'></progress></div></td>
    <td><div><p id='progress-text'></p></div></td>
  </tr>
</table>
</div>


<!--Uses jquery to run 3 scripts and displays it in a progress bar-->
<script>
$(document).on('click', '.edit', function(){
  //set cookie value to 'path'
  var fcookie='mycookie';
  var test_id = $(this).attr('id');
  if(test_id) {
    var path = $(this).closest('tr').find("td:nth-child(2)").text();
  }

  document.cookie='fcookie='+path;

    //Start of 1st script
      $.ajax({
        url: "ajax.php",
        type:"POST",
        success: function(data) {
          //alert("File 1 Completed")

            $("#progress-text").text("Executing file 1");
            $('#progBar').val(25);

            //Start of 2nd script
            $.ajax({
              url: "ajax2.php",
              type:"POST",
                success: function(data2) {
                  //alert("File 2 Completed")
                  $("#progress-text").text("Executing file 2");
                  $('#progBar').val(50);

                  //Start of 3rd script
                  $.ajax({
                    url: "ajax3.php",
                    type:"POST",
                      success: function(data3) {
                        //alert("File 2 Completed")
                         $("#progress-text").text("Complete");
                         $('#progBar').val(100);


                        $(this).closest("tr").find("td:nth-child(8)").load("pdf_report.php");

                      }
                  })
                }
            })
          }
    })
    return false;
   //});
});



</script>

pdf_report.php

...
<style>
.report {
  color: black;
  border: 2px solid #008CBA;
  border-radius: 8px;

}
</style>

<!-- Opens the pdf report in a new tab "_blank" -->
<a href= "<?php echo $path.$pdf; ?>" class="report w3-button" target="_blank">Report</a>

Answer 1

我认为这是一个范围问题。 $(this) 不再指代 $.ajax() 函数中的同一事物。

试试这个：

//Start of 1st script
var $this = $(this);  <=================== added this line, and modded one 30 below
$.ajax({
  url: "ajax.php",
  type: "POST",
  success: function(data) {
    //alert("File 1 Completed")

    $("#progress-text").text("Executing file 1");
    $('#progBar').val(25);

    //Start of 2nd script
    $.ajax({
      url: "ajax2.php",
      type: "POST",
      success: function(data2) {
        //alert("File 2 Completed")
        $("#progress-text").text("Executing file 2");
        $('#progBar').val(50);

        //Start of 3rd script
        $.ajax({
          url: "ajax3.php",
          type: "POST",
          success: function(data3) {
            //alert("File 2 Completed")
            $("#progress-text").text("Complete");
            $('#progBar').val(100);

            vv <=================================== modded $(this) to $this
            $this.closest("tr").find("td:nth-child(8)").load("pdf_report.php");

          }
        })
      }
    })
  }
})