자바 스크립트를 사용하여 하나의 웹 페이지에서 여러 테이블에 동적으로 행 추가하기

Question

이것은 아마도 html5에 대한 나의 경험이 부족한 것이지만 Javascript와 TBODY 태그 노드를 사용하여 테이블에 동적으로 행을 추가하는 데 효과가있는 코드가 있지만 데이터가 입력 될 때 동적으로 채워야하는 페이지에 둘 이상의 테이블이있을 때 ... 작동하지 않습니다 ...

내 문제는 무엇인지 알 수 없습니다. 섹션을 참조하는 방법 정보를 추가하고 싶습니다.

특정 태그가있는 노드를 만들려고했으나 인식 된 태그가 아니기 때문에 데이터가 추가되었지만 테이블에는 포함되지 않았습니다.

는 여기가 함께 작동하는 HTML 코드 내가 여기

document.getElementById("sendNoteToDispatch").onclick=function() 
    { 
     event.preventDefault(); 
     console.log("Made it to note entry."); 
     var noteTxt = $('#noteEntry').val(); 
     var noteEntBy = 'BGM'; 
     var nowNote = Date(); 
     var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss"); 
     if (!document.getElementsByTagName) return; 
     tabBody=document.getElementsByTagName("TBODY").item(0); 
     row=document.createElement("TR"); 
     cell1=document.createElement("TD"); 
     cell2=document.createElement("TD"); 
     cell3=document.createElement("TD"); 
     textnode1=document.createTextNode(noteEntDate); 
     textnode2=document.createTextNode(noteEntBy); 
     textnode3=document.createTextNode(noteTxt); 
     cell1.appendChild(textnode1); 
     cell2.appendChild(textnode2); 
     cell3.appendChild(textnode3); 
     row.appendChild(cell1); 
     row.appendChild(cell2); 
     row.appendChild(cell3); 
     tabBody.appendChild(row); 
     document.getElementById("noteEntry").value = ''; 
     document.getElementById("noteEntry").focus(); 
     } 

}); 

를 사용하고 자바 스크립트 코드 것입니다.

<div id="Notes" class='acceptEnterNotes'> 
      <form> 
       <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" /> 
       <button type="submit" id="sendNoteToDispatch" class="noteEntryButton buttonAddNote" value="Submit"> 
        Submit Note 
       </button> 
      </form> 
      <br /> 
      <br /> 
      <div id="filterNotesGriddiv"> 
       <input type="text" name="filterNotesGrid" id="filterNotesGrid" class="tableFilterInput" size="75" placeholder="Search the Table Below..." /> 
      </div> 
      <div id="notesEntered"> 
       <table id="notesEnteredGrid" class="lowerSectionTable"> 
        <tbody> 
         <tr class="enteredNotesHeader"> 
          <td class="tableHeaderCells cellDateEntered">Date Entered</td><td class="tableHeaderCells cellEnteredBy">Entered by</td><td class="tableHeaderCells cellNoteEntered">Note</td> 
         </tr> 
        </tbody> 
       </table> 

      </div> 

     </div> 

내가 tbodyNotes 같은 때문에, TBODY 태그를 변경했지만 문제가 해결되지 않았다, 그때 TBODY 노드에 ID를 추가하는 시도,하지만 ... 중 하나가 작동하지 않았다 그래서 아무것도 그 수 도움, 그래서 내가 다른 테이블과 다른 섹션을 추가 할 수 있습니다 ... 멋진 것입니다.

Answer 1

그래서 지금 당신이있는 페이지의 첫 번째 TBODY 태그를 얻고 :

tabBody=document.getElementsByTagName("TBODY").item(0); 

다음 다음과 TBODY에 해당 행을 삽입, 세포의 행을 구축 :

tabBody.appendChild(row); 

당신이 그것을 내부 TBODY와 함께 귀하의 페이지에 다른 테이블을 두는 경우에, 당신은 함께 두 번째 테이블의 TBODY 태그를 얻을 수 있습니다 :

tabBody2=document.getElementsByTagName("TBODY").item(1); 

일반적으로 많은 추측과 (아마도) 잘리고 붙여 넣은 코드를 사용하고있는 것처럼 보입니다. ID를 시도하고 작동하지 않는다고 말하면 다소 우스운 이야기입니다. 요소의 ID는 잘 작동하며 TBODY 태그도 작동합니다. 의심 스럽다면, 먼저 firebug 또는 chromebug 콘솔에서 호출 한 다음 TBODY 태그가 먼저 작동하도록 코드 줄을 만든 다음 코드에 넣으십시오. 이것을 사용해보십시오 : tbody가있는 두 개의 테이블을 html 페이지에 넣으십시오. "tbody1"과 "tbody2"와 같은 tbody 태그 ID를 입력하고 나서 firebug 콘솔을 열고 다음을 입력하십시오 : document.getElementById ("tbody1") 페이지 위로 요소가 강조 표시된 부분을 가리 키십시오. 그런 다음 tbody2를 사용해보십시오.

마지막으로 HTML5는 없으며 지루한 HTML과 자바 스크립트입니다. mozilla dev의 DOM API 레벨 2, HTML4 스펙 및 Javascript 참조를 보면 해당 명령에 대해 자세히 알 수 있습니다.