一：实现动态表格的三种常用方法

1、写好创建表格的 html 代码，赋值给 div 的 innerHTML。

2、用创建好的 table 元素的方法 insertRow 和 insertCell 来实现。

3、指定行列创建表格：通过循环。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>
	<body>
		<table>
			<thead class="set">
				<th>
					<input id="gaga" type="CheckBox" onchange="setAll()" name="title" />
					<span id="text">
						全选
					</span>
				<th>发件人</td>
				<th>邮箱名称</td>
				<th>邮箱附属信息</td>
				</th>
				</tr>

			<tbody>

			</tbody>
			<tfoot>
				<tr>
					<td>
						<input class="xixi" type="button" onclick="selectAll()" value="全选" name="qx" />
					</td>
					<td> <input type="button" onclick="unSelectAll()" value="取消全选" name="qq" />
					</td>
					<td> <input type="button" onclick="setOthers()" value="反选" name="fx" />
					</td>
					<td> <input type="button" onclick="delectAll()" value="删除所有附属信息" name="sc" />
					</td>
				</tr>
			</tfoot>


		</table>

	</body>
	<script type="text/javascript" src="./js/index.js"></script>
</html>

var email = [{
	name: "张三1",
	emailtitle: "邮件1",
	emailcontent: "你要接受"
}, {
	name: "张三2",
	emailtitle: "邮件2",
	emailcontent: "你要接受"
}, {
	name: "张三3",
	emailtitle: "邮件3",
	emailcontent: "你要接受"
}, {
	name: "张三4",
	emailtitle: "邮件4",
	emailcontent: "你要接受"
}, {
	name: "张三5",
	emailtitle: "邮件5",
	emailcontent: "你要接受"
}, {
	name: "张三6",
	emailtitle: "邮件6",
	emailcontent: "你要接受"
}, {
	name: "张三7",
	emailtitle: "邮件7",
	emailcontent: "你要接受"
}, {
	name: "张三8",
	emailtitle: "邮件8",
	emailcontent: "你要接受"
}, {
	name: "张三9",
	emailtitle: "邮件9",
	emailcontent: "你要接受"
}];



var mytbody = document.querySelector("tbody");
for (var i = 0; i < email.length; i++) {
	var mytr = document.createElement("tr");
	mytbody.appendChild(mytr);

	var mytd = document.createElement("td");
	mytr.appendChild(mytd);
	mytd.innerHTML = "<input type='CheckBox' class='xixi' />";

	for (var k in email[i]) {
		var mytd = document.createElement("td");
		mytr.appendChild(mytd);
		mytd.innerHTML = email[i][k];
	}
}


var mytr = document.querySelectorAll("tbody tr")
for (var i = 0; i < mytr.length; i++) {
	if (i % 2 == 0) {
		mytr[i].classList.add("c_singular");
	} else {
		mytr[i].classList.add("c_even");
	}
}



var gaga = document.getElementById("gaga"); //定义
var inputs = document.getElementsByClassName("xixi");

function setAll() {

	//判断
	if (gaga.checked) {
		selectAll();
	} else {
		unSelectAll();
	}
}


function selectAll() {
	//循环
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].checked = true; //点击复选框，下面全选为true
	}
	gaga.checked = true;
}

function unSelectAll() {
	//定义
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].checked = false; //点击复选框，下面全选为false

	}
	gaga.checked = false;
}

function setOthers() {
	var qx = document.getElementById("gaga");
	//定义
	//循环
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].checked = !inputs[i].checked; //点击反选，原本选中的不选，原本没选中的选中
		
	}

}

function delectAll() {
	var cc = document.querySelectorAll("tbody tr"); //找到content

	if (cc.length == 0) {
		alert("内容已全部删除！！！")
	} else {
		//定义

		for (var c = 0; c < cc.length; c++) {
			cc[c].remove(); //直接删除
		}
		//console.log(cc);
	}

}

二：js 的特点

解释型语言
类似于 C 和 Java 的语法结构
动态语言
基于原型的面向对象

三：js 的命名规范

1）代码规范通常包括以下几个方面:

变量和函数的命名规则
空格，缩进，注释的使用规则。
其他常用规范

2）变量名

变量名区分大小写，且包含字母、数字、美元符号和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号
变量命名长度应该尽可能的短
变量名的命名是有意义的
变量名不能为 JavaScript 中的关键词、保留字全名
变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。
变量名推荐使用驼峰法来命名 (camelCase)

注意:- 通常在 JavaScript 中被认为是减法，所以不允许使用。

3）对象规则

对象定义的规则：

将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性 - 值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。

JavaScript 如何实现动态表格以及它的命名规范

一：实现动态表格的三种常用方法

二：js 的特点

三：js 的命名规范

1）代码规范通常包括以下几个方面:

2）变量名

3）对象规则