前言：
正常的创建表格的思路是：html 里面，<table><tr><td>这样，一个一个去输入，如果你要创建 1000 行的表格 （这个可能的，比如学校录入学生信息的时候，我找半天才找到自己在3324行。），并且每行内容不一样的话，活生生把宝宝累垮掉啊，特别麻烦。万一你再报错的话，结果我想你是猜到的，下面我来给大家介绍一下，如何快速简单的创建表格~~~
1.创建标题行
首先，咱先设置一些表格的边框，字体对齐，简单的设置一下。再定义一个 div 的容器，用来存表格，取个类名 box 。
<style>
/* 给表格增加红色的框框 */
table,tr,td{
border: 1px solid red;
text-align: center;
}
table{
width: 400px;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>此处 border-collapse: collapse; 没有这行代码和有这行代码的区别，请看图，自行理解，文字我解释不来＞︿＜：
我们的第一步，效果图就是 有 这行代码的这个。注意 是 js 代码加上的效果哈，别忘了加下面的 js 才能看到上图效果。
js 的代码如下：
<script type="text/javascript">
var box = document.querySelector(".box");
//1.创建 table 添加到我们的 box 里面
var table = document.createElement("table");
box.appendChild(table);
//2.创建 thead 添加到table
var thead = document.createElement("thead");
table.appendChild(thead)
//3.创建 tr 添加到 theaed
var tr = document.createElement("tr");
thead.appendChild(tr);
//4.将标题行的内容扔进数组里 for 循环遍历放到表格里
var arr = ["姓名","年龄","性别","操作"];
for(var i=0; i<arr.length;i++){
var td = document.createElement("td");
td.innerHTML = arr[i];
tr.appendChild(td);
}
</script>2.创建表格的内容
<script type="text/javascript">
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//随便输入点内容进去啦
var datas = [{
name:"小红",
sex:"女",
age:20
},{
name:"小蓝",
sex:"男",
age:22
},{
name:"小粉",
sex:"女",
age:23
},{
name:"小绿",
sex:"男",
age:21
},{
name:"小紫",
sex:"女",
age:23
}]
for (var i=0;i < datas.length;i++){
var tr = document.createElement("tr");
tbody.appendChild(tr);
//datas[i] 等价于数组中的每一个对象，需要创建循环
for (var k in datas[i]){
var td = document.createElement("td");
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement("td");
tr.appendChild(td);
}
</script>如下是效果图：
3.创建链接，点击删除整行
<script type="text/javascript">
//创建链接
var a = document.createElement("a");
a.href = "#";
a.innerHTML = "删除";
td.appendChild(a);
a.onclick = function(){
this.parentNode.parentNode.remove();
}
//鼠标滑动的效果是热情粉色背景
tr.onmouseover = function(){
this.style.backgroundColor = "hotpink";
}
//鼠标移走，没有粉色背景啦
tr.onmouseout = function(){
this.style.backgroundColor = ""
}
</script>下图是效果图：鼠标经过哪一行哪一行变粉哦~
然后我们尝试删掉小绿看一下，点击删除之后的效果是：
整个页面代码我来给大家，可以试一下哈，我发到资源里了，名称是 js 表格，自己去看一下试一下哈~
未经允许，禁止转载~ 也不得抄，要自己加油哦 ฅʕ•̫͡•ʔฅ