이 코드가 있습니다 : 내 코드 작동 예
또는 ID : 내 코드의 예 2
또 다른 시도 : http://jsbin.com/wazeba/edit?js,console,output
그리고 다른 하나 (여기에서 코드 포함 : https://stackoverflow.com/a/4785886/4412054 ) : http://jsbin.com/fuvoma/edit?js,console,output
모든 경우에 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" 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"});
});
}
});
이제 각 getJSON에서 다른 값으로 모든 행을 업데이트해야합니다. 많은 아약스 호출 또는 더 추상적 인 많은 기능을 관리하는 방법은 무엇입니까?
서버가 울리면 양식을 업데이트해야합니다. 그리고 바로 그때.
모든 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(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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다