使用 jQuery 动态添加行

编程入门行业动态更新时间:2024-10-28 11:27:02

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

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

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

每次用户按下加号按钮时，都应将新的表单输入行添加到表单中，我如何在 jQuery 中执行此操作?此外，是否可以在所有行(或仅最后一行，如果它更容易/更快)被填满时自动添加新行?这样用户就不会不需要按加号按钮.

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.

很抱歉问了这么一个基本问题，但我对 jQuery 仍然很陌生，我可以用 PHP 做到这一点，但我确信 Javascript/jQuery 在这里扮演着更合适的角色.

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.

提前致谢！

<!DOCTYPE html> <head> <script type="text/javascript" src="ajax.googleapis/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...

HTML 标记如下所示

HTML markup looks like this

EDIT 在插入后清空文本框的值..

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 无法自拔，要重置插入的 TR 中的所有下拉列表，您可以执行此操作

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();});

剩下的交给你！