동적으로 테이블에 행을 추가하는 방법

Question

자바 스크립트를 사용하여 동적으로 테이블에 행을 추가하는 코드를 수정하는 방법은 무엇입니까? 다른 기능이있는 기존 코드입니다. 행을 추가하려면 표 아래에 하나의 버튼이 필요합니다. 추가 할 행이 몇 개 있는지 알려주는 팝업이 필요하지 않습니다. 매 히트마다 추가 행이 추가됩니다.

자바 스크립트

var editing = false; 

function catchIt(e) { 
    if (editing) return; 
    if (!document.getElementById || !document.createElement) return; 
    if (!e) var obj = window.event.srcElement; 
    else var obj = e.target; 
    while (obj.nodeType != 1) { 
     obj = obj.parentNode; 
    } 
    if (obj.tagName == 'INPUT' || obj.tagName == 'A') return; 
    while (obj.nodeName != 'TD' && obj.nodeName != 'HTML') { 
     obj = obj.parentNode; 
    } 
    if (obj.nodeName == 'HTML') return; 
    var x = obj.innerHTML; 
    var y = document.createElement('input'); 
    var z = obj.parentNode; 
    z.insertBefore(y, obj); 
    z.removeChild(obj); 
    y.value = x; 
    y.className = 'inp-edit'; 
    y.onblur = saveEdit; 
    y.focus(); 
    editing = true; 
} 

function saveEdit() { 
    var area = this; 
    var y = document.createElement('TD'); 
    var z = area.parentNode; 
    y.innerHTML = area.value; 
    z.insertBefore(y, area); 
    z.removeChild(area); 
    editing = false; 
} 

document.onclick = catchIt; 

당신은 당신의 행에 대한 템플릿 HTML을 추가 할 수 있도록하고 버튼의 클릭에 그 HTML을 추가 할 수 있습니다

<table border=1 class="display"> 
    <thead> 
     <tr class="portlet-section-header results-header"> 
      <th class="sorting">Operator ID</th> 
      <th class="sorting">Status</th> 
      <th class="sorting">First Name</th> 
      <th class="sorting">Last Name</th> 
      <th class="sorting">Email</th> 
      <th class="sorting">Role</th> 
      <th class="sorting_disabled">Select All 
       <br /> 
       <input type="checkbox" onclick="checkAll(this);" name="check" /> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td>Test1</td> 
      <td>Active</td> 
      <td>wsrc</td> 
      <td>wsrc</td> 
      <td>aa@aa.com</td> 
      <td>SE Admin</td> 
      <td> 
       <input type="checkbox" value="3" onclick="checkAllRev(this);" name="deleteItem" /> 
      </td> 
     </tr> 
     <tr class="even"> 
      <td>Test2</td> 
      <td>Inactive</td> 
      <td>EAI</td> 
      <td>SUBSYSTEM</td> 
      <td>aa@aa.com</td> 
      <td>API</td> 
      <td> 
       <input type="checkbox" value="4" onclick="checkAllRev(this);" name="deleteItem" /> 
      </td> 
     </tr> 
     <tr class="odd"> 
      <td>Test3</td> 
      <td>Inactive</td> 
      <td>Dunning</td> 
      <td>Portal</td> 
      <td>aa@aa.com</td> 
      <td>API</td> 
      <td> 
       <input type="checkbox" value="5" onclick="checkAllRev(this);" name="deleteItem" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

HTML.
예를 들어, 행이 추가 될 두 개의 열을 포함하고 같은 어떤 것을 보았다 :

<tr> 
    <td>Test</td> 
    <td>Active</td> 
</tr> 

당신은 변수에이 템플릿을 저장할 수 있습니다. 예를 들어 :

var template = "<tr><td>Test</td><td>Active</td></tr>"; 

지금의 jQuery append 기능은 동적으로 행을 추가 할 수 있습니다. 당신이 TBODY에 행을 추가 할 필요가 있기 때문에
은, 다음의 코드를 사용할 수 있습니다 :

$("tbody").append(template); 

유사한 접근 방식

원하는 작업을 달성하는 데 사용할 수 있습니다.