大佬教程收集整理的这篇文章主要介绍了使用jQuery提交数组的动态HTML，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我需要能够通过HTML表单提交数组或链接的数据列表.由于这个数组可以是可变长度,我有两个选择：
>使用某种形式的分隔符(例如,列表中以逗号分隔的项目)
>在需要添加新项目时,动态生成多个输入(每个数组项)
我想继续第二种选择,虽然我觉得由于这个特殊项目会有很多这样的“数组输入”,我应该创建一个jQuery插件,这样我就可以更容易地将这个@L_674_8@应用到未来的表单中.
当我处理这个时,我也一直在为多种输入类型添加@L_674_8@,选择,选择倍数(通过分隔符)和链接输入(例如 – 有两个文本输入,用于“名字”和“姓氏”,必须提交为一对)
(function($) { // Self-calling anonymous function to avoid namespace collisions or compatibility issues $.fn.dynamicList = function( options ) { // jQuery plugin deFinition /* Set up default options here */ defaults = { option1: "value1",option2: "value2" }; var options = $.extend( defaults,options ); /* Step 1. Add a jQuery-UI plus icon to the DOM */ /* Note: I have an option to specify where this icon should go in the DOm. It defaults right after the last input */ plus = $("<span>").addClass( 'jquery-ui-classes' ); this.last().after( plus ); /* Step 2. Add a table to the DOM for displaying added values */ /* Note: I have an option to specify where this table should go in the DOm. It defaults right after the plus icon */ plus.after( table ); /* Step 3. Add a handler for our plus button */ this.delegate( plus,'click',function() { /* Read the inputs,add their values to the table,empty the inputs */ /* Also,the last column of the table contains a minus button */ /* This is where I THOUGHT my first issue was.... */ minus = $("<span>").addClass( 'jquery-ui-classes' ); table.append( row ).append( minus ); }); /* Step 4. Add a handler for our minus button */ /* Since the minus is created within the plus handler we can't use "minus" here */ /* Instead I use a class name to locate it */ this.delegate( '.jquery-ui-minus-class',function() { /* Remove the relevant row from the table */ $(this).parents('tr').remove(); }); /* Step 5. Add our submit handler */ this.parents('form').first().submit(function() { /* We want all of the data in the table to be submitted with the form */ /* Therefore we create an input per cell and name it accordingly */ /* The name is just the name of the original input plus "[]" to make it an array */ /* This is where I thought my second problem was */ }); return this; // Maintain chain-ability }; )(jQuery);
在您希望用动态列表替换的输入上调用此代码.如果选择了多个输入,则它们将成为链接数据的列表(例如名字和姓氏示例).如何调用它的示例如下：
<html>
<head>
<!-- Include jQuery and my dynamic list library here -->
<script>
$('#fn,#ln').dynamicList();
</script>
</head>
<body>
<form>
<input id="fn" name="first_name" />
<input id="ln" name="last_name" />
</form>
</body>
</html>
这将创建一个动态列表,您可以在其中键入名字和姓氏,然后单击加号按钮(现在根据您的CSS规则在姓氏输入的右侧或下面),它将向包含一个表格添加一行一列中的第一个名称,另一个列中的姓氏,以及最后一个中的减号按钮.您可以继续输入名称并点击此加号按钮,表格无限向下延伸.提交表单(通过提交按钮或任何其他方法)后,表格单元格应成为输入.
我认为我遇到的第一个问题是在PLus处理程序中.由于我在通过单击加号按钮调用的函数内部,因此“this”关键字现在引用加号图标的DOM元素.我无法获取输入的值以将它们添加到表中.我提出的一个解决方案是创建一个全局变量,它是调用动态列表函数的对象的副本,如下所示：
.
.
.
/* Step 2. Add a table to the DOM for displaying added values */
/* Note: I have an option to specify where this table should go in the DOm. It defaults right after the plus icon */
plus.after( table );
var dynamicList = this;
/* Step 3. Add a handler for our plus button */
this.delegate( plus,the last column of the table contains a minus button */
/* This is where I THOUGHT my first issue was.... */
for( i = 0; i < dynamicList.length; i++ ) {
// dynamicList.get(i) will give us each input in order
}
minus = $("<span>").addClass( 'jquery-ui-classes' );
table.append( row ).append( minus );
});
.
.
.
我对此的关注是,如果我实例化多个动态列表,它们将相互覆盖.这是真的？如果是这样,我该如何克服这一点？
我认为我遇到的第二个问题是类似的.在提交表单后,我需要找到表格以获取要提交的值并查找输入以获取应提交的名称.
然而,在尝试使用代码尝试自己修复它时,我遇到的问题比预期的要快得多.
Uncaught TypeError: Object [object Object] has no method 'replace' jquery-1.6.2.min.js:16 f.each.f.fn.(anonymous function) jquery-1.6.2.min.js:17 f.fn.extend.delegate jquery-1.6.2.min.js:17 $.fn.dynamicList jquery.dynamicList.js:76 (anonymous function) test.PHP:16 f.extend._Deferred.e.resolveWith jquery-1.6.2.min.js:16 e.extend.ready jquery-1.6.2.min.js:16 c.addEventListener.b jquery-1.6.2.min.js:16
查看我的动态列表代码的第76行,它是以下行：
this.delegate( plus,function() {
我可以不调用.delegate(),因为“this”指的是多个jQuery对象吗？或者我不能调用.delegate(),因为“this”不是加号图标的父元素？一旦这个问题得到解决,我该如何解决我的其他两个问题？
编辑 –
我修改了标题,我在第76行找到了解决问题的方法.我不确定.delegate()是如何工作的,因为起初我尝试过：
this.first().parent().delegate( plus,function() {
它仍然对我不满.然后我意识到我可以只使用.click()函数(我有点傻)
plus.click( function() {
我在每行创建减号按钮时使用了类似的逻辑.我在创建减号按钮之后和插入DOM之前添加了minus.click(),省去了在代码中的任何地方使用.delegate()的麻烦.
仍然不确定如何从plus处理程序中的输入字段中获取值,因为此时“this”关键字已被覆盖以引用加号按钮,而不是我的输入字段.
以上是大佬教程为你收集整理的使用jQuery提交数组的动态HTML全部内容，希望文章能够帮你解决使用jQuery提交数组的动态HTML所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。