js实现表格结构

最新推荐文章于 2023-01-02 01:38:49 发布

置顶

小欣的blogs

最新推荐文章于 2023-01-02 01:38:49 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/cedricdx/article/details/89341565

版权

本文介绍了如何使用JavaScript和函数来创建动态表格，包括用js代码直接实现表格结构，以及通过封装函数来更高效地操作表格。同时提出了思考问题，探讨如何在点击‘删除’按钮时删除对应行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现表格

- 使用js和函数实现表格

使用js和函数实现表格

1.用js代码实现以上结构
2.用函数实现(封装)
3.思考题：
点击‘删除’按钮，删除该行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{padding: 0;margin: 0;}
	table{width: 500px;margin: 50px auto;border: 1px solid gray;border-collapse: collapse;}
	tr th,tr td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
</head>
<body>
	<script type="text/javascript">
		//1.创建表格
		var tab =document.createElement('table');
		//2.创建标题
		var cap=document.createElement('caption');
		cap.innerHTML='员工信息表';
		tab.appendChild(cap);
		//3.创建表头
		var thead=document.createElement('thead');
		//表头行
		var haed_tr=createTr(true,'th','编号','姓名','性别');
		//将行添加到head中
		thead.appendChild(hae