6 表格创建（静态+动态）

paipai大星

于 2023-07-22 12:19:21 发布

阅读量124

点赞数

分类专栏： html 文章标签： java 前端服务器 html

本文链接：https://blog.csdn.net/no996yes885/article/details/131864778

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

6.1 静态表格创建

表格创建使用<table>标签，然后在父标签中写子标签。<thead>是列名的标签；<tr>的意思是开始写其中一行的内容；<th>的意思是字体是标题属性；<tbody>的意思是开始写表格的数据，即非列名内容；<tr>就是开始写其中一行，每写一行都要用一个<tr>标签；<td>就是不带标题属性的字体。

	<body>
		<table>
			<thead>
				<tr>
					<th>列名1</th>
					<th>列名2</th>
					<th>列名3</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>内容1</td>
					<td>内容2</td>
					<td>内容3</td>
				</tr>
			</tbody>
			
		</table>
	</body>

运行结果如下：

6.2 动态表格的创建

动态表格的创建需要使用js，思路是：列名部分不变，动态的部分用js代码来写，表格内容定义在一个数组里，用双层for循环把数组元素一个个取出来，然后拼接为<tr><td>元素1</td><td>元素2</td>....<td>元素n</td></tr>的形式即可，再把拼接的内容赋值给<tbody>，即把<tbody>和</tbody>之间的内容替换掉。

js文件的代码如下，注意最后一个花括号一定要加分号，否则会出错！此外，入参不用写var！

function getTbody(tdDatas){
	var str = "";
	for(var i = 0;i<tdDatas.length;i++){
	    str += "<tr>";
		for(var j = 0 ; j <tdDatas[i].length;j++){
			var tdData  = tdDatas[i][j];
			str = str + "<td>"+ tdData +"</td>";
		}
		str += "</tr>";
	}
	return str;
};

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/demo2.css"/>
		<title></title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>列名1</th>
					<th>列名2</th>
					<th>列名3</th>
				</tr>
			</thead>
			
			<tbody id="table1">
				
			</tbody>
			
		</table>
		<script src="../js/demo1.js"></script>
		<script>
			var tdDatas = [["福州","厦门","龙岩"],
						  ["宁德","三明","南平"]];

			console.log(getTbody(tdDatas));
			document.getElementById("table1").innerHTML = getTbody(tdDatas);/*通过id定位，把右边的值赋给对应的标签*/
		</script>
	</body>
</html>

注意：console.log(getTbody(tdDatas));这段代码的意思是在控制台打印出getTbody(tdDatas)的返回值的意思，另外如果不知道哪里错了，可以按网页的F12，点击console即可查看错误信息。