如何显示要编辑的特定行的注释？

Question

这是一个使用 jQuery、阿贾克斯、菲律宾比索、MySQL 和 HTML 的注释系统。当我单击“编辑”按钮时，它显示MySQL表第一行的注释，而不是我选择的行。但是，一旦我编辑它，它确实会更正正确的行。我无法找到显示要编辑的行的注释的方法。我可以在文本区域中显示行的正确comment_id，但它会在文本区域中显示第一行的注释。下面是测试用例代码：MySQL表有两行：comment_id作为主行和文本注释。我将数据库命名为：testcaseedit_db，并将表命名为：tbl_comment。索引.php<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?><div id="display_comment"></div><div id="comment_message"></div><div id="display_edit"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function() {let count = 0;$(document).on('click change', '.edit, .submit', function(e) {  if ($(this).is('.edit')) {    var comment_id = $(this).attr("id");    $('#comment_id').val(comment_id);    var closestDiv = $('button').closest('div.panel');     $('.div.panel').not(closestDiv.next('.div.panel')).hide();    closestDiv.next('div.panel').slideToggle(100);    var commentEdit = $('#display_comment').find('#editable').html();   ++count;  const htmlString =   `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">    <div class="input-group-prepend">      <textarea name="comment" id="comment${count}" class="form-control" rows="30" cols="160">         ${commentEdit} ${comment_id}       </textarea>    </div>    <div class="input-group-prepend">     <input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />     <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />    </div>  </form>`;  $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);    }

Answer 1

解决方案如下：

在 fetch.php 文件中，我将每个变量的 id 制作成一个数组，如下所示：

<button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'"  id[2]="'.$row["comment"].'">Edit</button>

在索引.php文件中，我按如下方式获取每个变量的值：

    var comment_id = $(this).attr("id[1]");

    $('#comment_id').val(comment_id);

    var comment = $(this).attr("id[2]");

    $('#comment').val(comment);

然后我在文本区域内显示注释变量，如下所示：

<textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120">${comment}</textarea>

以下是索引.php和提取.php的完整代码。我离开了编辑.php原封不动：

索引.php

<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>

<div id="display_comment"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

let count = 0;

$(document).on('click change', '.edit, .submit', function(e) {

  if ($(this).is('.edit')) {

    var comment_id = $(this).attr("id[1]");

    $('#comment_id').val(comment_id);

    var comment = $(this).attr("id[2]");

    $('#comment').val(comment);

    var closestDiv = $('button').closest('div.panel'); 

    $('div.panel').not(closestDiv.next('div.panel')).hide();

    closestDiv.next('div.panel').slideToggle(100);

  ++count;

  const htmlString = 

  `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">

    <div class="input-group-prepend">

      <textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120"> 

        ${comment}

      </textarea>

    </div>

    <div class="input-group-prepend">

     <input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />

     <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />

    </div>

  </form>`;

  $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);

    } else if ($(this).is('.submit')) {

    $.ajax({

     url:"edit.php",

     method:"POST",

     data: new FormData(this),

     contentType: false,

     processData: false,

     success:function(data)

     {

      if(data.error != '') {

       $('#comment_form')[0].reset();

       $('#comment_id').val(comment_id);

       $('#comment').val(comment);

      }

     }

    });

   location.reload();

      $(this).closest('form').submit();

      e.stopPropagation();

    } else {

      return false;

    }

});

 // Fetch comment

 function load_comment(){

        $.ajax({

         url:"fetch.php",

         method:"POST",

         success:function(data){

          $('#display_comment').html(data);

         }

        })

 };

 load_comment();

// End of (document).ready(function){}

}); 

</script>

 </body>

</html>

获取.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$query = "

SELECT * FROM tbl_comment WHERE comment_id = comment_id

";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

$output = '';

foreach($result as $row) {

 $output .= '

 <div class="panel panel-default">

  <div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>

  <div class="panel-body"><b> Comment: </b> <br>  '.$row["comment"].' </div>

  <div class="panel-footer" align="right">

  <button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'"  id[2]="'.$row["comment"].'">Edit</button>

  </div>

 </div>

 ';

}

echo $output;

?>