자바 스크립트를 통해 값이 변경되면 테이블의 텍스트 입력이 업데이트되지 않습니다.

Question

셀에 입력 요소가 포함 된 테이블이 있습니다. (이 진행중인 작품은, 그래서 등 빈의 id를 무시하세요하지만 난 그것을 실행 해요로 실제 코드를 붙여 원) : 나는 다른 소스에서 데이터를 잡아 보내고있다

<table class='table table-bordered table-hover table-condensed' id='esr_table'> 
    <thead> 
    <tr> 
     <th class='macd_action'>Action</th> 
     <th class='macd_action'>Hostname</th> 
     <th class='macd_action'>IP Address</th> 
     <th class='macd_action'>Model</th> 
     <th class='clickme tw15' id='add_row'> 
     <span class='<% entry.0 %>_span glyphicon glyphicon-plus'> 
     </span> 
     </th> 
    </tr> 
    </thead> 
    <tbody id="esr_table_body"> 
     <tr> 
      <td class='' id=''> 
       <select> 
        <option value='Add'>Add</option> 
        <option value='Decommision'>Decommision</option> 
        <option value='Change'>Change</option>       
       </select> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='hostname' id='host' name='host'></input> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='0.0.0.0' id='ipaddress' name='ipaddress'></input> 
      </td> 
      <td class='' id=''> 
       <input type='text' placeholder='model' id='model' name='model'></input> 
      </td> 
      <td class='clickme minus' id=''> 
       <span class='minus glyphicon glyphicon-minus'></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 

을 처리를 위해 아약스를 통해 서버에 전달합니다. 서버는 데이터를 var 액션에 저장된 2 차원 배열로 반환합니다. 내 아약스 성공 기능은 다음과 같습니다 : 이것은 한 가지 문제를 제외하고 잘 작동

success: function(dat){ 
    var actCount = actions.length; 
    var rowCount = $('#esr_table_body tr').length; 

    for(var i = 0; i < actCount - rowCount; i++) { 
     $('#esr_table > tbody:last-child').append(trow); 
    } 

    var tbl = document.getElementById('esr_table_body'); 
    for(var i = 0; i <= actCount; i++){ 
     var rw = tbl.rows[i]; 
     for(var j = 0; j < 4; j++){ 
      rw.cells[j].firstChild.value = actions[i][j]; 
     } 
    } 
} 

- 테이블의 첫 번째 행은 빈 남아있다. 동적으로 추가 된 테이블에는 데이터가 채워지고 올바르게 표시됩니다. 테이블의 두 번째 행에는 반환 된 데이터의 두 번째 행이 포함됩니다. 반환되는 데이터가 올바른지 확인했습니다. 첫 번째 행이 누락 된 것은 아닙니다. 이 줄을 '작거나 같음'으로 변경하면 :

for(var i = 0; i < actCount - rowCount; i++) { 

여분의 행이 테이블에 추가됩니다. 표시 [I + 1] 다음 루프 대신 행 0 열 (1) 및 리턴 된 모든 데이터에 갱신을 시작

var rw = tbl.rows[i]; 

: I는 다음 행을 변경하는 경우. 또한 테이블을 두 개의 정적 행으로 변경하면 처음 두 행은 비어 있고 테이블의 세 번째 행은 반환 된 데이터의 세 번째 행으로 업데이트됩니다. 내가 볼 수있는 모든 것은 동적으로 생성 된 행에서 업데이트가 작동하지만 정적 행에서 작동하지 않거나 값이 업데이트 중이지만 디스플레이가 새로 고쳐지지 않고 있음을 나타냅니다. 동적 업데이트는 정적 HTML과 동일한 문자열을 페이지에 삽입합니다. 정적 HTML과 문자열을 분할 창에 붙여 넣은 다음 vimdiff를 수행하여 HTML이 동일한 지 확인합니다. 여러 브라우저에서이 시도한 및 동일한 동작을 참조하십시오. 나는 완전히 엉망이었고 몇 시간의 인터넷 검색은 그 문제가 무엇인지에 관해선 더 현명하지 못했습니다. 어떤 도움을 주셔서 감사합니다.

업데이트 : 더 자세히 살펴보면 더 어둡습니다. jsfiddle으로 이동하여 단추를 클릭하면 색인 0이어야하는 테이블의 첫 번째 행이 비어 있습니다. 셀에 값이 표시되지 않습니다. 그러나 콘솔을 열면 다음을 수행 할 수 있습니다.

var esrTable = document.getElementById("esr_table_body").children; 
undefined 
esrTable[0].cells[1].firstChild.value 
"Host1" 

그래서 할당 된 값을 검색 할 수 있지만 페이지에 표시되지 않습니까? 나는 할 수 없다.

Answer 1

tbody HTML을 비우고 (거기에 있던 단일 행 삭제) 스크립트가 처음에 행을 추가하도록 수정했습니다.

 
var trow = "..."; 

$('#esr_table > tbody:last-child').append(trow); 

function upd() { 
    ... 
} 

그렇지 테이블 분명히에도 인덱스 0이어야 첫번째 행을 인식하지 않는다 (즉, 행이 [0]에 정의되어있다)이로 판단 :

Uncaught TypeError: Cannot read property 'cells' of undefined

회만 인쇄 된 클릭당 (4 회 대비). 1 작업에서 시작하는주기에 대해 언급 한 내용도이를 지원합니다.

UPDATE

세포에서 그렇지 않으면 첫번째 아이들이 공백을 포함하는 텍스트 노드 일 것이기 때문에 실제 솔루션은,보다 컴팩트 한 행에 대한 HTML 코드를 만드는 :

<td class='' id=''><input type='text' placeholder='hostname' id='host' name='host'/></td> 
    <td class='' id=''><input type='text' placeholder='0.0.0.0' id='ipaddress' name='ipaddress'/></td> 
    <td class='' id=''><input type='text' placeholder='model' id='model' name='model'/></td> 
    <td class='clickme minus' id=''><span class='minus glyphicon glyphicon-minus'></span></td> 

... 또는 당신이 해결하기 위해 자바 스크립트를 사용하는 대신 단정하고 깔끔한 당신의 HTML을 유지하고 선호하는 경우 : COU의

for (var i = 0; i < actCount; i++) { 
    var rw = tbl.rows[i]; 
    for (var j = 0; j < 4; j++) { 
     if(rw.cells[j].firstChild.nodeType == 3) { 
     //nodeType is 3 for text nodes -- SHOW NO MERCY TO THEM 
     rw.cells[j].removeChild(rw.cells[j].firstChild); 
     } 
     rw.cells[j].firstChild.value = actions[i][j]; 
    } 
    } 

을 rse, 모든 클릭의 모든 행이 아니라 처음부터 행을 수정하는 것이 더 좋지만 구현 및 목표에 따라 다릅니다.

참고 : 정의되지 않은 행은 실제로 i 사이클이 0에서 actCount-1로 이동하는 대신 actCount로 이동하기 때문에 발생합니다.