HTML--表格追加元素的⽅法
表格追加元素，在Html与后台交互是⼗分常⽤的，不过有很多框架都封装掉了，这⾥就猜⼀猜它们可能是怎么实现的。（PS：我做后端的，确实不怎么关注前端，哪⼀种实现最好，效率最⾼，望告知）
关于页⾯事件丢失的问题，只要注意函数的调⽤顺序即可。
感觉还可以通过ateElement，再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;
jquery在一个元素后追加标签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 ElementById('mytable').insertRow(0);
var row1=table.insertCell(0);
row1.className = 'mytr';
row1.id = 'mytr';
row1.innerHTML="<td>row2</td>";
}
</script>
</body> </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。