Question

我有以下代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#add, .check ").click(function() {
            $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
            return false;
        });
    });
</script>

以下是身体：

<form action='demo.php' method='post'>
 <a  id="add">+</a></td>
  <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td>Name</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name[]" class='check' /></td>
    </tr>
    </tbody>
  </table>
  <input type='submit' />
</form>

如何在添加它们之后让它清除字段并添加一个效果，如淡入或向下滑动等等...另外，如果最后一行中的任何表单元素被聚焦，我希望它自动添加新行，但无法弄清楚如何访问最后一行的表单元素......：\

Answer 1

您可以使用类似的查找迭代新值。看看这个fiddle

 $("#add, .check ").click(function() {
$('#mytable tbody>tr:last')
    .clone(true)
    .insertAfter('#mytable tbody>tr:last').find('input').each(function(){
        $(this).val('');
    });
});

如果要使新行显示在最后一行的焦点上，则必须将焦点委派给最后一行的第一个输入。您希望使用委托，因为行是动态添加的。您也可以在插入克隆行后添加fadein效果。这是fiddle for this

$("#mytable").delegate(' tbody>tr:last input:first','focus',function(){
    $('#mytable tbody>tr:last')
    .clone(true)
    .insertAfter('#mytable tbody>tr:last').hide().fadeIn().find('input').each(function(){
        $(this).val('');
    });
});

使用JQuery添加新的输入元素行和表行

1 个答案: