如何通過使用javascript動態地修改代碼以在表中添加行？這是我現有的代碼，它具有其他功能。需要表格下方的一個按鈕來添加行。我不需要彈出窗口來說明你想添加多少行。每一擊都會增加額外的行數。如何在表中動態添加行

的Javascript

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

<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>[email protected]</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>[email protected]</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>[email protected]</td> 
      <td>API</td> 
      <td> 
       <input type="checkbox" value="5" onclick="checkAllRev(this);" name="deleteItem" /> 
      </td> 
     </tr> 
    </tbody> 
</table>

來源

2013-04-01 AmitG

什麼是'checkAllRev（）'，'button' *應該在哪裏？ –

PLZ忽略'checkAllRev（）'。 ADD按鈕可以在桌子底部（外部桌子） – AmitG

那麼你究竟想要添加到桌子上？請花點時間在你的問題中明確表達，最終讓每個人都能更快地完成工作。（我很抱歉，如果感覺像我在討論你，但到目前爲止，我不知道你想要什麼，除了動態添加行;這不足以解釋你的請求。） –

你可以添加你的行中的HTML模板，並添加按鈕的點擊該HTML。
例如，要添加的行包含兩列神情有些事情是這樣的：

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

您可以保存此模板中的變量。例如：

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

現在append jQuery的函數可以用來動態添加行。
既然你需要將行添加到TBODY，下面的代碼可用於：

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

類似的方法可以用來實現你想要的任務。

來源

2013-04-01 11:32:22

我沒有接受這個答案，因爲它沒有給出所需的輸出。是否有任何其他方式動態添加行？ – AmitG

如何在表中動態添加行

的Javascript

HTML

回答

相關問題