JSON 데이터로 테이블을 만드는 스크립트가 있습니다. 각 행에는 두 개의 텍스트와 하나의 버튼이 있습니다. 버튼의 onlick 메소드는 이전 테이블의 동일한 행에서 두 개의 텍스트로 채워질 다른 HTML 페이지로 이동해야합니다. 첫째, 다른 버튼의 onclick에서 다른 텍스트를 콘솔로 인쇄하려고합니다. 이를 수행해야하는 부분은 다음과 같습니다.
for ( var i in json) {
var row = table.insertRow(0);
var cel1 = row.insertCell(0);
var cel2 = row.insertCell(1);
var cel3 = row.insertCell(2);
cel1.innerHTML = json[i].nome;
cel2.innerHTML = json[i].idade;
var b = document.createElement("BUTTON");
var idd = "id" + i;
b.setAttribute("id", idd);
var t = document.createTextNode("Loja");
b.appendChild(t);
b.onclick = function(event) {
console.log(idd);
}
cel3.appendChild(b);
이것은 모든 올바른 ID로 테이블을 올바르게 생성하지만 모든 버튼을 누르면 iddID 버튼과 일치하는 값이 아닌 마지막 값이 인쇄 됩니다. 누구든지 이것을 해결하는 방법이나 그것을 구현하는 더 나은 방법을 알고 있습니까?
내가 보는 주요 문제는 변수 idd를 로깅하고 있다는 것입니다. 이 변수는 for 루프 뒤와 버튼을 클릭 할 때까지 정적 값을 갖습니다.
대신 다음을 시도해야합니다.
b.onclick = function(event) {
console.log(this.id);
}
또한 속성으로 속성을 설정하지 않고도 ID를 설정할 수 있습니다.
b.id = idd;
다음은 쉽게 시각화 할 수있는 예입니다.
for(var i=0, j=9; i<j; i++){
var tB = document.body.appendChild(document.createElement('button'));
tB.id = tB.innerHTML = i;
tB.onclick = function(){
console.log(i, this.id) //logs 9 (i is now statically 9) and the buttons id
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다