本文介绍了用jQuery动态添加行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建一个需要多个可选输入的表单,我所拥有的基本就是这样:



每次用户按下加号按钮应该在表单中添加一行新的表单输入,我怎么在jQuery中做到这一点? 另外,是否有可能在所有行(或只是最后一行,如果它更容易/更快)被填充时自动添加新行这样用户不会我需要按加号按钮。



我很抱歉,也许有这样一个基本问题,但我仍然非常青睐jQuery,我可以用PHP来做到这一点但我确信Javascript / jQuery在这里扮演更合适的角色。



预先感谢!






@alex:



 <!DOCTYPE html> 
< head>
< script type =text / javascriptsrc =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 (''); //它可以复制第一个值
$ justInserted.slideDown(500);
});
< / script>
< / head>

< body>
< form id =personasname =personasmethod =postaction =>
< table width =300border =1cellspacing =0cellpadding =2>
< tr>
< td>名称< / td>
< td>更多?< / td>
< / tr>
< tr class =person>
< td>< input type =textname =name []id =name []/>< / td>
< td>< a href =#id =add> +< / a>< / td>
< / tr>
< / table>
< / form>
< / body>
< / html>


解决方案

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

 < 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标记看起来像这样

 < 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!

这篇关于用jQuery动态添加行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 03:01