表格追加元素，在Html與后台交互是十分常用的，不過有很多框架都封裝掉了，這里就猜一猜它們可能是怎么實現的。
（PS：我做后端的，確實不怎么關注前端，哪一種實現最好，效率最高，望告知）
關於頁面事件丟失的問題，只要注意函數的調用順序即可。
感覺還可以通過document.createElement，再appendChild的方式來實現，感興趣地可以試一下。
JQuery實現
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格追加內容</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <style type="text/css"> .mytr { font-size: 13px; color: #666; background-color: #ecf0f5; } </style> <title>修改Html屬性</title> </head> <body> <table id="mytable"> <tr id="mytr" class="mytr" onclick="alerts()"> <td>row1</td> </tr> </table> <script> function alerts() { alert("click"); } $("#mytable").append("<tr id='mytr' class = 'mytr' onclick='alerts()'><td>row2</td></tr>"); </script> </body> </html>
JavaScript實現
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格追加內容</title> <style type="text/css"> .mytr { font-size: 13px; color: #666; background-color: #ecf0f5; } </style> <title>修改Html屬性</title> </head> <body onload="appr()"> <table id="mytable"> <tr id="mytr" class="mytr" onclick="appr()"> <td>row1</td> </tr> </table> <script type="text/javascript"> function alerts() { alert("click"); } function appr(){ var table=document.getElementById('mytable').insertRow(0); var row1=table.insertCell(0); row1.className = 'mytr'; row1.id = 'mytr'; row1.onclick = alerts; row1.innerHTML="<td>row2</td>"; } </script> </body> </html>