Question

我有一个这样的表格

<FORM method="post">
<TABLE>
<TR>
    <TD>Username</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
</TR>
<TR>
    <TD>Age</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Age"/><TD>
</TR>
<TR>
    <TD>City</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter City"/><TD>
</TR>
<TR>
    <TD>Comment</TD>
    <TD><INPUT type="text" value="" name="username" title="Enter Comment"/><TD>
</TR>
</TABLE>
</FORM>

我想要的是当用户填写评论框后，当他们按回车键然后动态另一个输入框必须使用javascript显示评论标签。

任何人都可以帮我写代码......

Answer 1

首先，表单中的所有输入名称都相同（name =“username”），您必须为每个输入指定一个唯一的名称。

将评论输入更改为

<TR id="comment">
    <TD>Comment</TD>
    <TD><INPUT type="text" value="" name="comment[]" title="Enter Comment"/><TD>
</TR>

请注意，我在TR中添加了id，因此使用jquery更容易锁定它，并且我还将输入名称更改为comment[]，因为如果您向dom添加新注释''我会有一个注释数组。

如果新评论应该有一个新名称，例如：'comment2'，您可以将其更改为'评论'

现在，使用Jquery执行以下操作：

$(document).keypress(function(e) {
    //catch enter event
    if(e.which == 13) {
         var $comment = $('#comments);
        //check that the user entered something in the comment input
        if($comment.find('input').val().length > 0)
        {
            //create new comment element and attach it to DOM
            var $newComment = $comment.clone().removeAttr('id');
            $('form table').append($newComment);
        }
    }
});

如果有帮助或者您需要更多信息，请告诉我。

Answer 2

试试我的朋友：

<FORM method="post">
    <TABLE>
    <TR>
        <TD>Username</TD>
        <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
    </TR>
    <TR>
        <TD>Age</TD>
        <TD><INPUT type="text" value="" name="age" title="Enter Age"/><TD>
    </TR>
    <TR>
        <TD>City</TD>
        <TD><INPUT type="text" value="" name="city" title="Enter City"/><TD>
    </TR>
    <TR>
        <TD>Comment</TD>
        <TD><INPUT class="comment" type="text" value="" name="comment[]" title="Enter Comment"/><TD>
    </TR>
    </TABLE>
</FORM>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function(){
        $('.comment').live('keydown', function(e){
            $field = $(this);
            // capture enter key being pressed
            if (e.which == 13)
            {
                $html = $(this).parents('tr').clone();
                $html.find('input').val('');
                $html.appendTo($field.parents('table'));
            }
        });
    });
</script>

填充其他输入框时动态添加输入框

2 个答案: