第一种jQuery方法创建动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意这里插入的jQuery -->
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<!-- 给input一个id 获取用户输入的行和列 -->
行：<input id="row1"></input>
列：<input id="col1"></input>
<!-- 给创建表格这个按钮一个id为他绑定一个点击事件 -->
<button id="createTable">创建表格</button>
<!-- 给div一个id用来存放表格 -->
<div id="div1"></div>
<script>
// 为按钮点击创建表格写一个方法
$("#createTable").click(function(){
// 将用户输入的行和列存到一个变量里面
var rows = $("#row1").val();
var cols = $("#col1").val();
// 设置表格的属性
var table = $('<table height="100px" width="100"border = "1px"></table>')
// 将表格添加在div下面
$("#div1").append(table);
// 用for循环创建表格
for (var i = 0; i < rows; i++) {
var tr = $('<tr></tr>');
$(table).append(tr);
for(var j = 0; j < cols; j++) {
var td = $('<td></td>');
$(tr).append(td);
}
}
})
</script>
</body>
</html>
第二种方法 原生js创建动态表格
<!DOCTYPE html>
<html>
<head>
<title>createTable2.html</title>
<style type="text/css">
table {
border: solid 2px;
border-collapse: collapse;
}
td {
border: solid 2px;
padding: 10px;
}
</style>
</head>
<body>
<!-- 先给用户输入的行数和列数一个id方便后面document获取 -->
行：<input id="row">
列：<input id="col">
<!-- 给添加按钮绑定一个单机事件用来创建表格 -->
<button onclick="createTable()">创建表格</button>
<!-- div的目的是为了存放表格 -->
<div id="div1"></div>
<script>
//获取用户输入的内容
function createTable() {
//注意 ： 不管是添加元素还是删除元素，都要通过父元素来进行操作
// 获取用户输入的行和列
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
// 获取div标签
var div1 = document.getElementById("div1")
// 创建一个表格元素
var table = document.createElement("table");
// 设置表格的属性
table.setAttribute("width", "300px", "height", "100px", "border", "1px solid")
// 将表格添加在div标签下
div1.appendChild(table)
// 使用for循环创建表格
for (var i = 0; i < row; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < col; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
}
</script>
</body>
</html>
版权声明：本文为weixin_44701385原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。