前言
只用HTML创建静态表格好说,遇到不确定长度表格的时候就不行了,这里分别给出JavaScript和jQuery两种创建动态表格的方法,本质是一样的
方法
- JavaScript方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格JavaScript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div><button id="confirm">确定</button></div>
<div>
<table>
<thead>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$("#confirm").click(function () {
$("#tbody").empty(); // 清空子元素
for(var i=0; i<10; i++) { // 循环次数根据需求更改
var tr = document.createElement("tr"),
td1 = document.createElement("td"),
td2 = document.createElement("td"),
td3 = document.createElement("td"),
td4 = document.createElement("td");
td1.innerHTML = "数据1"; // 数据根据需求修改
td2.innerHTML = "数据2";
td3.innerHTML = "数据3";
td4.innerHTML = "数据4";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
var tbody = document.getElementById("tbody");
tbody.appendChild(tr); // 插入子元素
}
})
})
</script>
</html>
2.jQuery方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格jQuery</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div><button id="confirm">确定</button></div>
<div>
<table>
<thead>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$("#confirm").click(function () {
for(var i=0; i<10; i++) { // 循环次数根据需求更改
var td1 = $("<td></td>").text("data1"), // 数据根据需求修改
td2 = $("<td></td>").text("data2"),
td3 = $("<td></td>").text("data3"),
td4 = $("<td></td>").text("data4");
var tr = $("<tr></tr>").append(td1, td2, td3, td4);
$("#tbody").append(tr);
}
})
});
</script>
</html>