js操作表格的小案例

<table id="mytable" border="1" class="table table-bordered">
</table>
<script>
	let table = document.getElementById("mytable"); //获取了id为mytable的标签
	//2.加上表头，获使用document创建元素
	let thead = document.createElement("thead");
	//将head标签的引用thead，附加到table中
	table.appendChild(thead);
	let tr = document.createElement("tr");
	thead.appendChild(tr);
	let th = document.createElement("th");
	th.innerText = "姓名";//插入文本
	tr.appendChild(th);
	th = document.createElement("th");
	th.innerText = "语文";//插入文本
	tr.appendChild(th);
	th = document.createElement("th");
	th.innerText = "英语";//插入文本
	tr.appendChild(th);
	th = document.createElement("th");
	th.innerText = "数学";//插入文本
	tr.appendChild(th);
	//3.加上内容
	let tbody = document.createElement("tbody");
	table.appendChild(tbody);
	let arrNames = ["小明", "小红", "小杰"];
	let arrYuWens = [80, 90, 100];
	let arrYingYus = [80, 60, 100];
	let arrShuXues = [80, 90, 100];//静态赋值
	let len = arrNames.length;
	let totalYuWen = 0;
	let totalYingyu = 0;
	let totalShuXue = 0;
	for(let i = 0; i < len; i++) {
		tr = document.createElement("tr");
		tbody.appendChild(tr);
		let td = document.createElement("td");
		td.innerText = arrNames[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerText = arrYuWens[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerText = arrYingYus[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerText = arrShuXues[i];
		tr.appendChild(td);
		totalYuWen += arrYuWens[i];
		totalYingyu += arrYingYus[i];
		totalShuXue += arrShuXues[i];
	}
	let avgYuWen = totalYuWen / len;
	let avgYingyu = totalYingyu / len;
	let avgShuXue = totalShuXue / len;
	//求平均数
	tr = document.createElement("tr");
	tbody.appendChild(tr);
	td = document.createElement("td");
	td.innerText = "平均";
	tr.appendChild(td);
	td = document.createElement("td");
	td.innerText = avgYuWen;
	tr.appendChild(td);
	td = document.createElement("td");
	td.innerText = avgYingyu;
	tr.appendChild(td);
	td = document.createElement("td");
	td.innerText = avgShuXue;
	tr.appendChild(td);
</script>

书本列表

<button type="button" onclick="add()" class="btn btn-success">添加</button>
<table border="1" id="mytable" class="table table-bordered">
	<thead>
		<tr>
			<th>序号</th>
			<th>书名</th>
			<th>日期</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
总价格:<span id="span_result"></span>
<script type="text/javascript">
	let books = [
		{id: 1, name: 'Java从入门到高级', price: 89.99, tdate: '2020-07-01', count: 1},
		{id: 2, name: '计算机网络', price: 69.99, tdate: '2020-07-02', count: 1},
		{id: 3, name: '操作系统', price: 56.99, tdate: '2020-07-03', count: 1},
		{id: 4, name: '数据结构与算法', price: 58.99, tdate: '2020-07-04', count: 1},
	]
	
	//将数组保存到sessionStorage中
	let data = sessionStorage.getItem("data");
	
	if(data) {
		books = JSON.parse(data);
	}else {
		sessionStorage.setItem("data", JSON.stringify(books));
	}
	
	//获取table对象
	let table = document.getElementsByTagName("table")[0];
	let tbody = table.getElementsByTagName("tbody")[0];
	
	//将数组中的值显示在表格中
	function update() {
		for(let index in books) {
			// console.log(index);
			let item = books[index];
			// console.log(typeof(item));
			let tr = document.createElement("tr");
			tbody.appendChild(tr);
			
			for(let val in item) {
				let text = item[val];
				let isHtml = false;
				if (val === "name") {
					text = `
						<a href='#' onclick='edit(${index})'>${text}</a>
					`;
					isHtml = true;
				}else if(val === 'count') {
					text = `
						<button type="button" class="btn btn-primary" onclick="jian(${index})">-</button>
						<span>${text}</span>
						<button type="button"class="btn btn-primary" onclick="jia(${index})">+</button>
					`;
					isHtml = true;
				}
				appendTd(tr, text, isHtml);
			}
			let opt = `
				<button onclick='edit(${index})' class="btn btn-info">编辑</button>
				<button onclick="del(${index})" class="btn btn-success">删除</button>
			`;
			appendTd(tr, opt, true);
		}
	}
	function appendTd(tr, value, isHtml) {
		let td = document.createElement("td"); 
		if(isHtml) {
			td.innerHTML = value;
		}else {
			td.innerText = value;
		}
		tr.appendChild(td);
	}
	function add() {
		location.href = "add.html";
		sessionStorage.setItem("item", null);
	}
	function edit(index) {
		let item = books[index];
		sessionStorage.setItem("index", index);
		sessionStorage.setItem("item", JSON.stringify(item));
		location.href = "add.html";
	}
	function jia(index) {
		let item = books[index];
		item.count++;
		let node = tbody.childNodes[index + 1];
		let span = node.getElementsByTagName("span")[0];
		console.log(span);
		span.innerText = item.count;
		console.log(books);
		getTotal();
	}
	function jian(index) {
		let item = books[index];
		if(item.count === 1) {
			return;
		}
		item.count--;
		let node = tbody.childNodes[index + 1];
		let span = node.getElementsByTagName("span")[0];
		span.innerText = item.count;
		getTotal();
	}
	function del(index) {
		let node = tbody.childNodes[index + 1];
		tbody.removeChild(node);
		//删除数组中的数据
		books.splice(index, 1);
		console.log(books.toString());
	}
	function getTotal() {
		let total = 0;
		for(let item of books) {
			total += item.price * item.count;
		}
		document.getElementById("span_result").innerText = total;
	}
	update();
	getTotal();
</script>

add.html

<form id="form">
	<input type="text" name="name" placeholder="书本名称" /></br>
	<input type="text" name="price" placeholder="单价"/></br>
	<input type="date" name="tdate" placeholder="出版日期" /></br>
	<button type="button" onclick="save()">保存</button>
</form>
<script type="text/javascript">
	let input_name = document.getElementsByName("name")[0];
	let input_price = document.getElementsByName("price")[0];
	let input_tdate = document.getElementsByName("tdate")[0];
	//判断是添加还是编辑
	let item = JSON.parse(sessionStorage.getItem("item"));
	console.log(item);
	if(item) {
		input_name.value = item.name;
		input_price.value = item.price;
		input_tdate.value = item.tdate;
	}
	function save() {
		// let form = document.getElementById("form");
		let name = input_name.value;
		let price = input_price.value;
		let tdate = input_tdate.value;
		let obj = {
			id: 1,
			name: name,
			price: price,
			tdate: tdate,
			count: item ? item.count : 1
		}
		
		//获取数组
		let data = sessionStorage.getItem("data");
		if(data) {
			data = JSON.parse(data);
			if(item) {
				let index = sessionStorage.getItem("index");
				data.splice(index, 1, obj)
			}else {
				data.push(obj);//添加
			}
			//放回去
			sessionStorage.setItem("data", JSON.stringify(data));
			// console.log(data);
			//页面跳转
			location.href = '书本.html';
		}
	}
</script>

运行截图