Javascript jQuery多行多功能，如何管理？
我有以下代码： 或者可能是带有ID的： 另一种尝试： 还有一个（代码如下：）： 在任何情况下，ID都是相同的 我的html：Javascript jQuery多行多功能，如何管理？,javascript,jquery,arrays,ajax,getjson,Javascript,Jquery,Arrays,Ajax,Getjson,我有以下代码： 或者可能是带有ID的： 另一种尝试： 还有一个（代码如下：）： 在任何情况下，ID都是相同的 我的html： <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <meta name="viewport" cont
<!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(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"});
});
}
});
JS-Bin
测试很多！
代码
名称
添加
<!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(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"});
});
}
});
jQuery（文档）.ready（函数（）{
jQuery（“#btnTest”）。单击（函数（）{
对于（变量i=0；i<10；i++）{
控制台日志（“测试：+i”）；
jQuery（“#formTest tbody tr”）.last（）.find（“输入[name*='anumber']”）val（'243'）；
jQuery（“#btnAdd”）。单击（）；
}
});
jQuery（“#btnAdd”）。单击（函数（e）{
lastR=$（“#formTest tbody tr”）.last（）；
jQuery（lastR.clone（）.appendTo（“#formTest tbody”）；
readFnc（lastR）；
});
函数readFnc（lastR）{
rowCode=$（lastR）.find（“输入[name='anumber']”）；
rowName=$（lastR）.find（“输入[name='name']”）；
var jqxhr=$.getJSON（'http://beta.json-generator.com/api/json/get/41Lpsgmsx，函数（数据）{
})
.fail（函数（）{
控制台日志（“错误”）；
})
.完成（功能（数据）{
console.log（“咕！”）；
行代码.val（数据.code）；
rowName.val（data.name）；
$（lastR.css（{“背景色”：“#99ff99”}）；
});
}
});
如果我为每个tr分配了一个ID，那么在每个“添加”上单击函数变量被覆盖。如何操作？getJSON是异步的，因此脚本创建10行，然后使用last（）选择器解析getJSON承诺，只将值分配给创建的最后一行。为了避免此问题，可以将克隆对象传递给函数。 为了便于解释，您可以看到callOrder和resolveOrder的顺序不同
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（文档）.ready（函数（）{
jQuery（“#btnTest”）。单击（函数（）{
对于（变量i=0；i<10；i++）{
控制台日志（“测试：+i”）；
jQuery（“#formTest tbody tr”）.last（）.find（“输入[name*='anumber']”）val（'243'）；
jQuery（“#btnAdd”）。单击（）；
}
});
var callORder=0；
jQuery（“#btnAdd”）。单击（函数（e）{
lastR=$（“#formTest tbody tr”）.last（）；
var newRow=jQuery（lastR.clone（）；
newRow.appendTo（“#formTest tbody”）；
readFnc（newRow，++callORder）；
});
var resolveOrder=0；
函数readFnc（newR、callORder）{
var jqxhr=$.getJSON（'http://beta.json-generator.com/api/json/get/41Lpsgmsx，函数（数据）{}）
.fail（函数（）{
控制台日志（“错误”）；
})
.完成（功能（数据）{
console.log（“咕！”）；
rowCode=newR.find（“输入[name='anumber']”）；
rowName=newR.find（“输入[name='name']”）；
val（data.code++（+++resolveOrder）+++（callORder））；
rowName.val（data.name）；
newR.css({
“背景色”：“#99ff99”
});
});
}
});
JS-Bin
测试很多！
代码
名称
添加
亲爱的@Vanojx1，您的代码很漂亮，非常感谢，但我需要立即创建新行，因为我需要立即另一个输入来写入并放入队列。我不能等待执行所有getjson，然后再次写入并将新行添加到“队列”。这才是真正的问题。我能给函数传递一个ID吗？TR的ID如本例所示：也许这个答案可以帮助我们？对不起，我不知道istant的创建是真正的问题。我已经编辑了我的答案，希望现在它能解决你的问题