동적으로 생성 된 테이블 자바 스크립트를 추가하십시오.

xhr 요청을하고 응답을 얻습니다. 그리고 추가로 테이블에 도착하는 값을 추가합니다. 그런 다음 다른 페이지에서 두 번째 xhr 요청을 만들고 이전에 삽입 된 행 아래에 추가하려는 다른 결과를 얻습니다. 문제는 이전에 만든 행의 "아래"를 얻는 대신 모든 다음에 추가한다는 것입니다. .. 이것들이 동적으로 생성 되었기 때문에 나는 짐작할 수 있습니다. 그러나 이것을 해결할 방법이 있습니까? 대신에 새로운 행이 추가 갖는 여기 동적으로 생성 된 테이블 자바 스크립트를 추가하십시오.

가

function response(url, callback{ 
    //xhr request 
    } 

var url1 = "http://example1.com"; 
request(url1, function(response){ 
     var temp1 = document.getElementsByTagName("table")[0]; 
    var temp2create = document.createElement("tr"); 
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");   
    temp2create.innerHTML = temp3; 
    temp1.appendChild(temp2create); 
}); 
var url2 = "http://example1.com"; 
request(url2, function(response){ 
     var temp4 = document.getElementsByTagName("table")[0]; 
    var temp5create = document.createElement("tr"); 
    var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");   
    temp5create.innerHTML = temp6; 
    temp4.appendChild(temp5create); 
});

나의 코드 .. 먼저 HTML

<body> 
    <table border="1"> 
     <tr> 
     <th>first cell</th> 
     <th>second cell</th> 
     </tr> 
    </table> 
    <div id="div1"> 
</body>

내 자바 스크립트이다 .. 테이블 또는 행 클래스 나 ID를 추가하지 않고 이전 행 다음에 이전에 도착합니다.

출처

2012-11-27 nikolas

에 innerHTML 속성을 사용하지 마십시오 테이블을 수정하면 대부분의 (모든?) IE 버전에서 실패합니다. 전체 테이블이나 셀의 내용에는 사용할 수 있지만 그 사이에는 아무 것도 사용할 수 없습니다. 대신 [DOM methods] (https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples#Example_8.3A_Using_the_DOM_Table_Interface)를 사용하십시오. – RobG

첫 번째 xhr 요청은 두 번째 요청보다 완료하는 데 더 오래 걸릴 수 있습니다. 따라서 두 번째 응답은 첫 번째 응답을 수신하고 응답을 추가하기 전에 응답을 추가합니다.

<body> 
    <table border="1"> 
     <tr> 
      <th>first cell</th> 
      <th>second cell</th> 
     </tr> 
     <tr id="tr1"> 

     </tr> 
     <tr id="tr2"> 

     </tr> 
    </table> 
</body>

및 자바 스크립트 : 요청 고정 된 양이 돌아올 경우 같은 테이블에 자리 행을 만들 수 중 하나

(url1,response()) 
{ 
    document.getElementById("tr1").innerHTML("someresponse"); 
} 

(url2,response()) 
{ 
    document.getElementById("tr2").innerHTML("some other response"); 
}

또는 당신은 순서 경우에서 발생하는 요청을 연결할 수 시간은 본질의 것이 아닙니다.

request(url1, function(response){ 
    var temp1 = document.getElementsByTagName("table")[0]; 
    var temp2create = document.createElement("tr"); 
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");   
    temp2create.innerHTML = temp3; 
    temp1.appendChild(temp2create); 

    var url2 = "http://example1.com"; 
    request(url2, function(response){ 
     var temp4 = document.getElementsByTagName("table")[0]; 
     var temp5create = document.createElement("tr"); 
     var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");   
     temp5create.innerHTML = temp6; 
     temp4.appendChild(temp5create); 
    }); 
});

출처

2012-11-28 00:08:15

요청에 대한 콜백이 있으므로 첫 번째 요청/응답 완료 후 두 번째 응답이 반환된다고 가정해서는 안됩니까? – nikolas

번호. xmlhttprequest를 만들면 응답이 다시 오기 전까지 콜백 함수가 javascript 이벤트 대기열에 추가되지 않습니다. 따라서 귀하가 줄을 서있는 다른 요청은 첫 번째 응답을 처리 한 후에 구체적으로 호출되지 않으면 실행되지 않습니다. 자세한 내용은이 페이지를 참조하십시오 : http://javascript.info/tutorial/events-and-timing-depth –

대단히 감사합니다 ..:) – nikolas

nikolas, no. 호출은 비동기 적으로 실행되는 순서이며 완료는 정의되지 않습니다. 시작 순서와 일치하는 완료 순서에 의존 할 수 없습니다. 필요한 경우 두 번째 xhr이 첫 번째 콜백 (체인)에서 호출되도록해야합니다.

출처

2012-11-28 00:16:47 Carl

나는 콜백이 firstone이 완료된 후에 nextcall이 놓여 졌는지를 확실히 알 수 있다고 생각했기 때문에 지적했다. – nikolas

최근 프로젝트에서 JSON을 HTML에 추가해야했던 이유입니다.

행을 추가

appendTableRow('geoTable', "MPH", 70); 
appendTableRow('geoTable', "KPH ", 112.654);

기능 표

<table id="geoTable" border="1"></table>

채우기를 정의

function appendTableRow(tableName,name,value) { tableName = "#" + tableName; //<tr><td>name</td><td>value</td></tr> var tableRow = "<tr><td>$name</td><td>$value</td></tr>"; tableRow = tableRow.replace("$name",name); tableRow = tableRow.replace("$value",value); $(tableName).append(tableRow); }

출처

2016-07-08 17:13:04

동적으로 생성 된 테이블 자바 스크립트를 추가하십시오.

답변

관련 문제