用jQuery动态添加行

更新时间：2023-12-06 10:58:28

这会让你关闭，添加按钮已经从表格中删除，以便您可以考虑这一点...

 < script type =text / javascript&gt ; 
 $（document）.ready（function（）{
 $（＃add）。click（function（）{
 $（'＃mytable tbody> tr：last'）。 clone（true）.insertAfter（'＃mytable tbody> tr：last'）; 
 return false; 
}）; 
}）; 
< / script>

HTML标记看起来像这样

 < a id =add> +< / a>< / td> 
< table id =mytablewidth =300border =1cellspacing =0cellpadding =2> 
< tbody> 
< tr> 
< td>名称< / td> 
< / tr> 
< tr class =person> 
< td>< input type =textname =nameid =name/>< / td> 
< / tr> 
< / tbody> 
< / table>

编辑插入后清空文本框的值。 p>

  $（'＃mytable tbody> tr：last'）。clone（true）.insertAfter（'＃mytable tbody> tr：last ）; 
 $（'＃mytable tbody> tr：last #name'）。val（''）; 
返回false;

EDIT2 无法自己重置所有的下拉列表插入TR你可以做到这一点

  $（＃mytable tbody> tr：last）each（function（）{this 。重启（）;}）;

我会把剩下的给你！

I'm building a form where I need multiple optional inputs, what I have is basically this:

form example http://i49.tinypic.com/fcscyh.png

Every time a user presses the plus button a new row of form inputs should be added to the form, how can I do this in jQuery? Also, is it possible to automatically add a new row when all rows (or just the last row, if it's easier / faster) are filled? That way the user wouldn't need to press the plus button.

I'm sorry for asking maybe such a basic question but I'm still very green with jQuery, I could do this with PHP but I'm sure Javascript / jQuery plays a more appropriate role here.

Thanks in advance!

@alex:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$form = $('#personas');
$rows = $form.find('.person');

$('a#add').click(function() {
    $rows.find(':first').clone().insertAfter($rows.find(':last'));
    $justInserted = $rows.find(':last');
    $justInserted.hide();
    $justInserted.find('input').val(''); // it may copy values from first one
    $justInserted.slideDown(500);
});
</script>
</head>

<body>
<form id="personas" name="personas" method="post" action="">
  <table width="300" border="1" cellspacing="0" cellpadding="2">
    <tr>
      <td>Name</td>
      <td>More?</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name[]" id="name[]" /></td>
      <td><a href="#" id="add">+</a></td>
    </tr>
  </table>
</form>
</body>
</html>

This will get you close, the add button has been removed out of the table so you might want to consider this...

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
          return false;
        });
    });
</script>

HTML markup looks like this

  <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" id="name" /></td>
    </tr>
    </tbody>
  </table>

EDIT To empty a value of a textbox after insert..

    $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
    $('#mytable tbody>tr:last #name').val('');
    return false;

EDIT2 Couldn't help myself, to reset all dropdown lists in the inserted TR you can do this

$("#mytable tbody>tr:last").each(function() {this.reset();});

I will leave the rest to you!

上一篇 : ：在datagridview中动态创建列和添加行下一篇 : 动态创建的Windows窗体

用jQuery动态添加行

@alex:

相关阅读

推荐文章