Question

我实际上正在尝试发表评论并在评论输入时编辑选项，它将显示在＆＃39; div＆＃39;通过ajax。

<?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（）函数获取警报，这里我没有得到如何为此评论输入逻辑。

当点击编辑选项时，用户必须在输入文字＆＃39;值＆＃39;中获得他/她的评论。所以用户可以编辑评论。

onclick如何进行编辑评论，请任何人都可以帮忙!!

Answer 1

这对您有帮助

这里我采用一个示例数组输入数据

PHP SCRIPT

<?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 {display：none;} .editedText {display：none;}

Answer 2

查看此jquery插件：http://jsfiddle.net/2u89gnn8/1/

例如，当用户点击h1时，您可以设置button可编辑：

$('h1').editable({
    "enable": true,
    "trigger": $('button')
});

如何在onclick到输入文本时更改html标记元素，以便用户可以编辑注释

2 个答案: