Question

当我点击添加评论时，我在这里打开了textarea。所以我不想再使用iframe了，可以用JQuery来完成吗？我在查看load()函数。我该怎么做？提前谢谢！

我的代码

<table cellpadding="2" cellspacing="0" width="100%">
    <tr onclick="showhide('comment_#aggr_page_variable#'); return(false);" onmouseover="this.style.background='##e7eced';this.style.cursor='pointer'" onmouseout="this.style.background='##f0f3f4';" bgcolor="##f0f3f4">
        <td align="left" width="10">
            <img src="pics/button_triangle.gif" alt="" width="10" height="8" border="0">
        </td>
        <td align="left">
            <font class="text_small">
            <font color="##777777">Click to add a comment</font></font>
        </td>
    </tr>
</table>

的iFrame

<div id="comment_#aggr_page_variable#" style="display:none;">
        <div style="paddingo-bottom: 0px;">
            <iframe src="#submitted_display_new_comment.cfm?=#aggr_page_variable#" width="100%" height="81" frameborder="no" scrolling="no" src="" marginwidth="0" marginheight="0"></iframe>
        </div>
    </div>

textarea的

<textarea rows="3" cols="50" name="comment" style="font-family: Arial; font-size: 13px; border: 1px solid ##dddddd; padding:2px; width:410px; height:51;"></textarea>

Answer 1

编辑：更新，修复了我忘了的分割。

这是我如何进行此设置。

每个TR都有一个唯一的ID（格式为cl_#id#）并为点击事件共享一个类。

JS Fiddle http://jsfiddle.net/zct0c7ww/2

JQuery用于填充表单中的隐藏字段，表单以div显示。样式是通用的，但你可以随心所欲地使用它。

那里有一条奖金线，只是告诉你它是如何工作的，你可以将它删除。在您的表单提交或ajax提交中，您使用#form.commentID#和#form.comment#

＆＃13;

$(function() {
   $(".commentlink").on("click", function(e) {
       var cl_index = $(this).attr('id').split("_")[1];
       $("#comment_box").show();
       $("#comment_box").css('visibility','visible');
       $("#commentID").val(cl_index);
       // This next line is just for demonstration.
       $("#commentTA").val("The hidden field in this form, 'commentID' has had it's value set to " + cl_index + ".");
   });
});

＆＃13;

#comment_box {display: none;
    visibility: hidden}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table cellpadding="2" cellspacing="0" width="100%">
    <tr id="cl_1" class="commentlink" onclick="showhide('comment_#aggr_page_variable#'); return(false);" onmouseover="this.style.background='##e7eced';this.style.cursor='pointer'" onmouseout="this.style.background='##f0f3f4';" bgcolor="##f0f3f4">
        <td align="left" width="10">
            <img src="pics/button_triangle.gif" alt="" width="10" height="8" border="0">
        </td>
        <td align="left">
            <font class="text_small">
                <font color="##777777">Click to add a comment</font></font>
        </td>
    </tr>
    <tr id="cl_2" class="commentlink" onclick="showhide('comment_#aggr_page_variable#'); return(false);" onmouseover="this.style.background='##e7eced';this.style.cursor='pointer'" onmouseout="this.style.background='##f0f3f4';" bgcolor="##f0f3f4">
        <td align="left" width="10">
            <img src="pics/button_triangle.gif" alt="" width="10" height="8" border="0">
        </td>
        <td align="left">
            <font class="text_small">
                <font color="##777777">Click to add a comment</font></font>
        </td>
    </tr>
</table>
    
<div id="comment_box">
        <div style="paddingo-bottom: 0px;">
            <form>
                <input type="hidden" name="commentID" id="commentID" value="0">
            <textarea rows="3" cols="50" name="comment" id="commentTA" style="font-family: Arial; font-size: 13px; border: 1px solid ##dddddd; padding:2px; width:410px; height:51;"></textarea>
                </form>
        </div>
    </div>

＆＃13;

Answer 2

我会实现类似ajax调用的东西，它将注释存储在数据库中，并将新注释附加到ajax调用的on sucess事件中的div。

举个例子：

<td id="addComment" align="left">
    <font class="text_small">
    <font color="##777777">Click to add a comment</font></font>
</td>

<div id="comments"></div>

Ajax电话：

$("#addComment").click(function(){
  $.ajax({url:"your-page-here", success:function(result){
    $("#comments").append(result);
  }});
});

如何用Jquery替换iframe？

2 个答案: