jQuery的许多行的许多功能，如何管理？ [英] jQuery many functions for many rows, how to manage?
本文介绍了jQuery的许多行的许多功能，如何管理？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的code：我的code工作示例
或者，也许这跟ID：我的code 的例2
另一个尝试： http://jsbin.com/wazeba/edit?js,console输出
和另一个（与code从这里： http://stackoverflow.com/a/4785886/4412054）： http://jsbin.com/fuvoma/edit?js,console,output
每个案件的ID是一样的。
我的 HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-1.11.3.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度＆GT;
＆LT;标题＆GT; JS斌＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; BR＆GT;＆LT; BR＆GT;＆LT; BR＆GT;＆LT;按钮ID =为btnTest＆GT;！测试许多与LT; /按钮＆GT;
＆LT; BR＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
＆LT;表ID =formTest＆GT; ＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i code＆LT; / TD＆GT;
＆LT;第i个姓名和LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=aNumber的ID =aNumber的＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本名称=名字ID =名称＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; /表及GT;＆LT;按钮式=按钮ID =btnAdd＆gt;添加＆LT; /按钮＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
和我的的JavaScript
的jQuery（文件）。就绪（函数（）{ jQuery的（＃为btnTest）。点击（函数（）{
为（变量I = 0; I＆小于10;我++）{
的console.log（测试+ I）;
。jQuery的（＃formTest TBODY TR）最后一个（）找到（输入[*名称='aNumber的']）VAL（'243'）。
jQuery的（'＃btnAdd'）点击（）。
}
}）;
jQuery的（＃btnAdd）。点击（函数（五）{
lastR = $（＃formTest TBODY TR）最后的（）。
jQuery的（lastR）.clone（）appendTo（'＃formTest TBODY'）。
readFnc（lastR）;
}）; 功能readFnc（lastR）{
排code = $（lastR）.find（输入[名称= aNumber的']）;
rowName = $（lastR）.find（输入[名称='名']）;
VAR jqxhr = $ .getJSON（http://beta.json-generator.com/api/json/get/41Lpsgmsx'功能（数据）{
}）
.fail（函数（）{
的console.log（错误）;
}）
.done（功能（数据）{
的console.log（咕！）;
排code.val（数据code）;
rowName.val（data.name）;
$（lastR）的.css（{背景颜色：＃99ff99}）;
}）;
}}）;
现在我需要从每个的getJSON不同的值更新所有行。如何管理多个Ajax调用，或者更抽象的，很多功能？
我需要更新表单服务器resonds时。就在这时。
如果我分配一个ID，以每Tr然后在每个添加，单击函数变量覆盖。怎么办？
解决方案
的getJSON是异步，使该脚本创建10行就在这时，它解决的getJSON诺言，用最后的（）选择它的价值只分配到最后一行创建。为了避免这个问题，你可以克隆的对象传递给函数。
只是说明可以看出，callOrder和resolveOrder是不同的顺序。
VAR callORder = 0; jQuery的（＃btnAdd）。点击（函数（五）{
lastR = $（＃formTest TBODY TR）最后的（）。
VAR NEWROW =的jQuery（lastR）.clone（）;
newRow.appendTo（'＃formTest TBODY'）;
readFnc（NEWROW，++ callORder）;
}）; 变种resolveOrder = 0; 功能readFnc（newR，callORder）{ VAR jqxhr = $ .getJSON（http://beta.json-generator.com/api/json/get/41Lpsgmsx'功能（数据）{}）
.fail（函数（）{
的console.log（错误）;
}）
.done（功能（数据）{
的console.log（咕！）;
排code = newR.find（输入[名称= aNumber的']）;
rowName = newR.find（输入[名称='名']）;
排code.val（数据code ++（++ resolveOrder）++（callORder））;
rowName.val（data.name）;
newR.css（{
背景色：＃99ff99
}）;
}）;
}
\r
\r\r
\r的jQuery（文件）。就绪（函数（）{\r
\r
jQuery的（＃为btnTest）。点击（函数（）{\r
为（变量I = 0; I＆小于10;我++）{\r
的console.log（测试+ I）;\r
。jQuery的（＃formTest TBODY TR）最后一个（）找到（输入[*名称='aNumber的']）VAL（'243'）。\r
jQuery的（'＃btnAdd'）点击（）。\r
}\r
}）;\r
\r
变种callORder = 0;\r
\r
jQuery的（＃btnAdd）。点击（函数（五）{\r
lastR = $（＃formTest TBODY TR）最后的（）。\r
VAR NEWROW =的jQuery（lastR）.clone（）;\r
newRow.appendTo（'＃formTest TBODY'）;\r
readFnc（NEWROW，++ callORder）;\r
}）;\r
\r
变种resolveOrder = 0;\r
\r
功能readFnc（newR，callORder）{\r
\r
VAR jqxhr = $ .getJSON（http://beta.json-generator.com/api/json/get/41Lpsgmsx'功能（数据）{}）\r
.fail（函数（）{\r
的console.log（错误）;\r
}）\r
.done（功能（数据）{\r
的console.log（咕！）;\r
排code = newR.find（输入[名称= aNumber的']）;\r
rowName = newR.find（输入[名称='名']）;\r
排code.val（数据code ++（++ resolveOrder）++（callORder））;\r
rowName.val（data.name）;\r
newR.css（{\r
背景色：＃99ff99\r
}）;\r
}）;\r
}\r
\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-1.11.3.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度＆GT;\r
＆LT;标题＆GT; JS斌＆LT; /标题＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
＆LT; BR＆GT;\r
＆LT; BR＆GT;\r
＆LT; BR＆GT;\r
\r
＆LT;按钮ID =为btnTest＆GT;！测试许多与LT; /按钮＆GT;\r
＆LT; BR＆GT;\r
＆LT; BR＆GT;\r
＆LT; BR＆GT;\r
＆LT;表ID =formTest＆GT;\r
\r
＆LT;表＆gt;\r
＆LT;＆THEAD GT;\r
＆所述; TR＆GT;\r
＆LT;第i code＆LT; / TD＆GT;\r
＆LT;第i个姓名和LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / THEAD＆GT;\r
＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
＆所述; TD＆GT;\r
＆LT;输入类型=文本名称=aNumber的ID =aNumber的＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD＆GT;\r
＆LT;输入类型=文本名称=名字ID =名称＆GT;\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
\r
\r
＆LT; /表及GT;\r
\r
＆LT;按钮式=按钮ID =btnAdd＆gt;添加＆LT; /按钮＆GT;\r
\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
I have this code: Example of my code working
Or maybe this with ID: Example 2 of my code
Another try: http://jsbin.com/wazeba/edit?js,console,output
And another one (with code from here: http://stackoverflow.com/a/4785886/4412054 ): http://jsbin.com/fuvoma/edit?js,console,output
IN EVERY CASE THE ID IS THE SAME.
My html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<br><br><br>
<button id="btnTest">Test many!</button>
<br><br><br>
<form id="formTest">
<table>
<thead>
<tr>
<th>Code</td>
<th>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="anumber" id="anumber">
</td>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="btnAdd">Add</button>
</body>
</html>
and my Javascript:
jQuery(document).ready(function() {
jQuery("#btnTest").click(function() {
for (var i = 0; i < 10; i++) {
console.log("Test: " + i);
jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
jQuery('#btnAdd').click();
}
});
jQuery("#btnAdd").click(function(e) {
lastR = $("#formTest tbody tr").last();
jQuery(lastR).clone().appendTo('#formTest tbody');
readFnc(lastR);
});
function readFnc(lastR) {
rowCode = $(lastR).find("input[name='anumber']");
rowName = $(lastR).find("input[name='name']");
var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {
})
.fail( function() {
console.log("Error");
})
.done( function(data) {
console.log("Goo!");
rowCode.val(data.code);
rowName.val(data.name);
$(lastR).css({"background-color": "#99ff99"});
});
}
});
Now I need to update every row with a different value from each getJSON. How to manage many ajax calls or, more abstract, many functions?
I need to update form when the server resonds. And just then.
If I assign an ID to every tr then on each "Add" click the function variables are override. How to do?
解决方案
getJSON is async so the script create 10 rows and just THEN it resolve the getJSOn promise, using the last() selector it assign the value only to the last row created. To avoid this issue you can pass the cloned object to the function. Just for explanation you can see that callOrder and resolveOrder are in a different order.
var callORder = 0;
jQuery("#btnAdd").click(function(e) {
lastR = $("#formTest tbody tr").last();
var newRow = jQuery(lastR).clone();
newRow.appendTo('#formTest tbody');
readFnc(newRow,++callORder);
});
var resolveOrder = 0;
function readFnc(newR,callORder) {
var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
.fail(function() {
console.log("Error");
})
.done(function(data) {
console.log("Goo!");
rowCode = newR.find("input[name='anumber']");
rowName = newR.find("input[name='name']");
rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
rowName.val(data.name);
newR.css({
"background-color": "#99ff99"
});
});
}
jQuery(document).ready(function() {
jQuery("#btnTest").click(function() {
for (var i = 0; i < 10; i++) {
console.log("Test: " + i);
jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
jQuery('#btnAdd').click();
}
});
var callORder = 0;
jQuery("#btnAdd").click(function(e) {
lastR = $("#formTest tbody tr").last();
var newRow = jQuery(lastR).clone();
newRow.appendTo('#formTest tbody');
readFnc(newRow,++callORder);
});
var resolveOrder = 0;
function readFnc(newR,callORder) {
var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
.fail(function() {
console.log("Error");
})
.done(function(data) {
console.log("Goo!");
rowCode = newR.find("input[name='anumber']");
rowName = newR.find("input[name='name']");
rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
rowName.val(data.name);
newR.css({
"background-color": "#99ff99"
});
});
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<br>
<br>
<br>
<button id="btnTest">Test many!</button>
<br>
<br>
<br>
<form id="formTest">
<table>
<thead>
<tr>
<th>Code</td>
<th>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="anumber" id="anumber">
</td>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="btnAdd">Add</button>
</body>
</html>
这篇关于jQuery的许多行的许多功能，如何管理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
