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

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"].'"&nbsp; id[2]="'.$row["comment"].'">Edit</button>在索引.php文件中，我按如下方式获取每个变量的值：&nbsp; &nbsp; var comment_id = $(this).attr("id[1]");&nbsp; &nbsp; $('#comment_id').val(comment_id);&nbsp; &nbsp; var comment = $(this).attr("id[2]");&nbsp; &nbsp; $('#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) {&nbsp; if ($(this).is('.edit')) {&nbsp; &nbsp; var comment_id = $(this).attr("id[1]");&nbsp; &nbsp; $('#comment_id').val(comment_id);&nbsp; &nbsp; var comment = $(this).attr("id[2]");&nbsp; &nbsp; $('#comment').val(comment);&nbsp; &nbsp; var closestDiv = $('button').closest('div.panel');&nbsp;&nbsp; &nbsp; $('div.panel').not(closestDiv.next('div.panel')).hide();&nbsp; &nbsp; closestDiv.next('div.panel').slideToggle(100);&nbsp; ++count;&nbsp; const htmlString =&nbsp;&nbsp; `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">&nbsp; &nbsp; <div class="input-group-prepend">&nbsp; &nbsp; &nbsp; <textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ${comment}&nbsp; &nbsp; &nbsp; </textarea>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="input-group-prepend">&nbsp; &nbsp; &nbsp;<input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />&nbsp; &nbsp; &nbsp;<input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />&nbsp; &nbsp; </div>&nbsp; </form>`;&nbsp; $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);&nbsp; &nbsp; } else if ($(this).is('.submit')) {&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp;url:"edit.php",&nbsp; &nbsp; &nbsp;method:"POST",&nbsp; &nbsp; &nbsp;data: new FormData(this),&nbsp; &nbsp; &nbsp;contentType: false,&nbsp; &nbsp; &nbsp;processData: false,&nbsp; &nbsp; &nbsp;success:function(data)&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; if(data.error != '') {&nbsp; &nbsp; &nbsp; &nbsp;$('#comment_form')[0].reset();&nbsp; &nbsp; &nbsp; &nbsp;$('#comment_id').val(comment_id);&nbsp; &nbsp; &nbsp; &nbsp;$('#comment').val(comment);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; });&nbsp; &nbsp;location.reload();&nbsp; &nbsp; &nbsp; $(this).closest('form').submit();&nbsp; &nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }});&nbsp;// Fetch comment&nbsp;function load_comment(){&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;url:"fetch.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#display_comment').html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp;};&nbsp;load_comment();// End of (document).ready(function){}});&nbsp;</script>&nbsp;</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) {&nbsp;$output .= '&nbsp;<div class="panel panel-default">&nbsp; <div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>&nbsp; <div class="panel-body"><b> Comment: </b> <br>&nbsp; '.$row["comment"].' </div>&nbsp; <div class="panel-footer" align="right">&nbsp; <button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'"&nbsp; id[2]="'.$row["comment"].'">Edit</button>&nbsp; </div>&nbsp;</div>&nbsp;';}echo $output;?>