使用JavaScript在表格中創建元素

我試圖用數據庫中的內容創建表格，我可以刪除或編輯該表格。所以我想在每一行的最後一個單元格中創建兩個按鈕（一個用於刪除，另一個用於編輯內容）。使用JavaScript在表格中創建元素

我已經試過這樣：

<td>${test.id}</td> 
 
<td>${test.name}</td> 
 
<td> 
 
    <script> 
 
    var x = document.createElement("INPUT"); 
 
    x.setAttribute("type", "submit"); 
 
    x.setAttribute("value", "edit"); 
 
    x.setAttribute("id", "edit" + $ { 
 
     test.id 
 
    }); 
 
    document.body.appendChild(x); 
 
    </script> 
 
</td> 
 
</tr>

，但在頁面頂部創建按鈕...

我是否HABE創建整個表一個腳本？

來源

2015-10-08 Bernhard Schneeweiß

而不是將其追加到'document.body'，你應該將它附加到你的表格或者表格行，是你想要的。 – Aeolingamenfel

聲音很明顯，但是我怎樣將一個元素附加到一個單元格？^^ –

選擇單元格，或者帶有ID或動態。如果表的id是'my_table'，那麼你可以用jQuery選擇器來選擇它：'$（「＃my_table tr td」）'會返回表中的所有'td's。 – Aeolingamenfel

-1

好的，謝謝大家的幫助，但我做到了由自己被追加到最後一個單元格：

<script> 
 
    var x = document.createElement("INPUT"); 
 
x.setAttribute("type", "submit"); 
 
x.setAttribute("value", "edit"); 
 
x.setAttribute("id", "edit" + $ { 
 
    test.id 
 
}); 
 
document.getElementById("datatable").lastChild.lastChild.appendChild(x); < /script>

來源

2015-10-12 13:18:30

-2

你以後需要一個腳本來連接事件處理程序，而是讓你的代碼工作：

<td>${test.id}</td> 
 
<td>${test.name}</td> 
 
<td> 
 
    <input type="submit" value="edit" id="edit${test.id}" /> 
 
</td> 
 
</tr>

來源

2015-10-08 15:48:11 TbWill4321

如果你要內聯它，只需編寫html。此外，document.write是相當危險的，因爲如果文檔關閉，它可以覆蓋整個文檔。 – linuxdan

我不明白爲什麼要創建使用JavaScript的按鈕。像正常一樣寫HTML，然後在文檔中綁定事件。您展示的方法不是必需的，也不是一種很好的方法。

更好的途徑是使用事件委託，因此您只將一個事件綁定到表。當點擊一個按鈕時，你檢查事件的目標，如果它是一個按鈕，相應地採取行動。

無論使用哪種事件綁定方法，都沒有理由使用javascript來創建元素。下面，我將使用代表團進行說明。

另一個快速提示，如果你打算做很多其他的javascript，你可能會更好地得到像jQuery這樣的庫。既然你沒有表明你有jQuery，下面的代碼是「香草」JavaScript。

// quickie cross-browser events 
 
function addEvent(element, evnt, funct){ 
 
    if (element.attachEvent) 
 
    return element.attachEvent('on'+evnt, funct); 
 
    else 
 
    return element.addEventListener(evnt, funct, false); 
 
} 
 

 
// bind an event to the table, capture any clicks 
 
addEvent(
 
    document.getElementById('datatable'), 
 
    'click', 
 
    function (e) { 
 
     var targetElement = e.target; 
 
     
 
     // we're only worried about clicks on button elements 
 
     if (targetElement.tagName != 'BUTTON') 
 
      return true; 
 

 
     var id = targetElement.dataset.id; 
 
     // handle edit button click 
 
     if ((' '+targetElement.className+' ').indexOf(' edit-button ') > -1) { 
 
      alert('edit button for #'+id+' clicked'); 
 
      return false; 
 
     } 
 
     
 
     // handle delete button click 
 
     if ((' '+targetElement.className+' ').indexOf(' delete-button ') > -1) { 
 
      alert('delete button for #'+id+' clicked'); 
 
      return false; 
 
     } 
 
    } 
 
);

<table id="datatable"> 
 
     <tr> 
 
      <td>${test.id}</td> 
 
      <td>${test.name}</td> 
 
      <td> 
 
      <button class="edit-button" data-id="{$test.id}">edit</button> 
 
      <button class="delete-button" data-id="{$test.id}">delete</button> 
 
      </td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>${test.id}</td> 
 
      <td>${test.name}</td> 
 
      <td> 
 
      <button class="edit-button" data-id="{$test.id}">edit</button> 
 
      <button class="delete-button" data-id="{$test.id}">delete</button> 
 
      </td> 
 
     </tr> 
 
     <!-- ... etc --> 
 
    </table>

相關閱讀

數據屬性 - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
事件介紹 - http://www.quirksmode.org/js/introevents.html
事件委託 - http://davidwalsh.name/event-delegate

來源

2015-10-08 16:06:31

thx爲你的幫助，但我不明白你的腳本如何工作？我也得到這個錯誤：「Uncaught TypeError：無法讀取屬性'的attachEvent'null」！我想通過使用此按鈕提交ID和其他窗體objets，這將工作嗎？ –

@BernhardSchneeweiß您可以將javascript放在文檔的末尾，或者放在單獨的文件中，在文檔的末尾加上'

11. 創建一個TR元素中的TD元素使用Javascript

12. 使用javascript在另一個元素內創建span元素

13. 使用JavaScript和jquery創建元素

14. 使用javascript創建新元素

15. 使用javascript動態創建元素

16. 使用Javascript動態創建HTML元素？

17. 如何使用javascript創建xhtml元素

18. 使用javascript創建動態元素

19. 在列表中創建元素以創建元素

20. 如何從javascript中的數組創建html表格元素tilemap？

21. 在javascript中創建我的html元素

22. 在javascript中創建ul和li元素。

23. 在jQuery中創建空元素/ javascript

24. 關於在JavaScript中創建新元素

25. 使用動態輸入元素列表創建表格

26. 使用attr創建用javascript創建的元素

27. 從列表元素創建javascript對象

28. 如何創建新的表格元素？

29. 在javascript中創建表格單元格時添加CSS

30. 使用python元素樹從xml在Excel工作表中創建子表格

使用JavaScript在表格中創建元素

回答

相關問題