javascript - 如何在单击输入文本时更改 html 标记元素，以便用户可以编辑评论

Question

我实际上是在尝试发表评论并在评论输入时编辑选项，它将通过 ajax 显示在“div”中。

<?php
 $q="select * from discuss where rownum=1 order by id desc";

 $s=oci_parse($conn, $q);

 $r=oci_execute($s) or die(oci_error());

 echo "<table border=1>";
 while($m=oci_fetch_assoc($s))
 {  
 echo "<tr style='background-color:red'><th style='float:left;color:white'>Name :    ".$m['NAME']."</th><th style='float:right;color:white'>Date: "."".$m['DATE_TIME']."</th></tr>";
    echo "<tr class='edit_option' style='width:1000px;height:10px;background- color:white'><div><td id='input_text' style='width:1000px;height:10px;background-   color:white'>".$m['COMMENTS']."</div><div  class='anchor_edit' id='anchor_id_edit'><span   onclick=\"edit_text('".$m['COMMENTS']."')\">edit</span></div></td></tr>";
 }
 echo "</table>";


 ?>
<script>
 function edit_text(edit_option){

  alert(edit_option);

  }


</script>

onclick 函数值即将进入 edit_text() 函数得到警报，这里我不知道如何输入此评论的逻辑。

单击编辑选项时，用户必须在输入文本“值”中获取他/她的评论，以便用户可以编辑评论。

onclick我怎样才能编辑评论，请任何人帮助!!

Answer 1

这可能对你有帮助

这里我取一个样本数组输入数据

PHP 脚本

<?php

 $r=array(
     array('COMMENT-ID'=>'1','NAME'=>'Comment1','COMMENTS'=>'Comment1Comment1Comment1Comment1','DATE_TIME'=>'12547896321'),
     array('COMMENT-ID'=>'2','NAME'=>'Comment2','COMMENTS'=>'Comment2Comment2Comment2Comment2','DATE_TIME'=>'12547896321'),
     array('COMMENT-ID'=>'3','NAME'=>'Comment3','COMMENTS'=>'Comment3Comment3Comment3Comment3','DATE_TIME'=>'12547896321'),
     array('COMMENT-ID'=>'4','NAME'=>'Comment4','COMMENTS'=>'Comment4Comment4Comment4Comment4','DATE_TIME'=>'12547896321')
 );

 echo "<div>";
 foreach($r as $m)
 {  ?>
 <div>
     <div>
         Name :    <?php echo $m['NAME']; ?>
     </div>
     <div>
         Date: <?php echo $m['DATE_TIME']; ?>
     </div>
 </div>

 <div class="comment">
     <div class="comment-text" id="comment<?php echo $m['COMMENT-ID']; ?>">
         <?php echo $m['COMMENTS']; ?>
     </div>
     <div class="commentEditBtn">
         Edit
     </div>
     <div class="editedText"></div>
     <div class="commentInput" data-id="<?php echo $m['COMMENT-ID'] ?>">
         <input type="text" name="comment" /><br/>
         <button class="commentSubmit">Submit</button>
     </div>
 </div><br/>
 <?php }
 echo "</div>";
 ?>

jQuery

 $(".commentEditBtn").on('click',function(){
        $('.commentinput').hide();
        var parentDiv = $(this).parent();
        var commentText = parentDiv.find('.comment-text').html();
        parentDiv.find('.commentInput input').val(commentText.trim());
        parentDiv.find('.commentInput').show();
    });
    $(".commentInput > input").keypress(function(){
        var commentData = $(this).val();
        $(this).parent().parent().find('.editedText').html(commentData.trim()).show();
    });
    $(".commentInput .commentSubmit").on('click',function(){
        var commentId = $(this).parent().attr('data-id');
        var commentText = $(this).parent().find('input').val().trim();
        $(this).parent().parent().find('.editedText').html('').hide();
        $.ajax({
           url: "AJAX_POST_URL",
           type: "POST",
           data: {
             commentId: commentId,
             commentText: commentText
           },
           dataType: 'json',
           success: function (data) {
               if (data.error == 'false') {
                   $('#comment' + commentId).html(commentText);
               }
           }
        });
    });

CSS

.commentInput{显示:无；} .editedText{显示:无;}