Javascript 1 - 实现表格单元格dom增删改查

以下内容参考自青岛思途java讲师臧老师
要求

1。生成指定行数和列数的表格。
2。按从左往右,从上往下的顺序给单元格着色,着色按照“赤、橙、黄、绿、青、蓝、紫”的顺序循环。
3。表格显示横向斑马线、纵向斑马线。
4。鼠标滑过,所在行变色。按住Ctrl键时,鼠标滑过,所在列变色。
5。鼠标单击,所在行被选中并高亮,按住Ctrl键时,鼠标单击,所在列被选中并高亮。
6。在选中的行前、后添加一行(或指定的行数)。在选中的列前、后添加一列(或指定的列数)。
7。删除选中行。
8。对单元格进行编号,选中行向上、向下移动。选中列向左、向右移动。
9。更改指定单元格的内容。
10。将以上行列单选模式更改为复选模式,删除选中的多行或多列。
11。在添加行、列及删除行、列时,保证单元格的颜色规律不变。

Javascript 1 - 实现表格单元格dom增删改查_第1张图片
index.html

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格单元格DOM的增删改查title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}

			table tr td {
				border: 1px solid #ccc;
				padding: 5px 10px;
				text-align: center;
			}

			#pos {
				width: 60px;
				height: 20px;
				box-sizing: border-box;
			}

			select {
				width: 60px;
				height: 20px;
			}
		style>
		<script src="js/index.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<table id="tbl" cellpadding="0" cellspacing="0">
			<tr>
				<td>11td>
				<td>12td>
				<td>13td>
				<td>14td>
			tr>
			<tr>
				<td>21td>
				<td>22td>
				<td>23td>
				<td>24td>
			tr>
			<tr>
				<td>31td>
				<td>32td>
				<td>33td>
				<td>34td>
			tr>
			<tr>
				<td>41td>
				<td>42td>
				<td>43td>
				<td>44td>
			tr>
		table>

		<form action="">
			<span>span>
			<input id="pos" type="text">
			<select id="type">
				<option value="0">option>
				<option value="1">option>
			select>
			<select id="direction">
				<option value="0">option>
				<option value="1">option>
			select>
			<select id="operation">
				<option value="0">添加option>
				<option value="1">删除option>
			select>
			<button id="confirm" type="button">确定button>
		form>
	body>
html>

index.js

window.onload = function() {
	var btn = document.querySelector("#confirm");
	btn.addEventListener("click", function() {
		// 位置
		var pos = document.querySelector("#pos");
		// 操作类型
		var type = document.querySelector("#type");
		// 方向
		var dir = document.querySelector("#direction");
		// 操作
		var operation = document.querySelector("#operation");

		if (pos.value == "") {
			alert("请输入要操作的目标位置");
			return;
		}
		if (isNaN(pos.value)) {
			alert("目标位置必须是合法的行列整数");
			return;
		}

		if (type.value == "0") { //添加删除行
			var trs = document.querySelectorAll("table tr");
			var target = trs[pos.value - 1];

			if (operation.value == "0") {
				//新行
				var newtr = document.createElement("tr");
				for (var i = 0; i < 4; i++) {
					var newtd = document.createElement("td");
					newtd.innerText = i;
					newtr.appendChild(newtd);
				}

				if (dir.value == "0") { //在前操作
					target.parentElement.insertBefore(newtr, target);
				} else if (dir.value == "1") { //在后操作
					var next = target.nextElementSibling;
					if (next) {
						target.parentElement.insertBefore(newtr, next);
					} else {
						target.parentElement.appendChild(newtr);
					}
				}
			} else if (operation.value == "1") {
				if (dir.value == "0") { //在前操作
					var prev = target.previousElementSibling;
					if (prev) {
						prev.remove();
					}
				} else if (dir.value == "1") { //在后操作
					var next = target.nextElementSibling;
					if (next) {
						next.remove();
					}
				}
			}

		} else if (type.value == "1") { //添加删除列
			if (operation.value == "0") { //添加
				if (dir.value == "0") { //在前操作
					var trs = document.querySelectorAll("table tr");
					for (var i = 0; i < trs.length; i++) {
						var tr = trs[i];
						//目标列
						var target = tr.children[pos.value - 1];
						var newtd = document.createElement("td");
						target.parentElement.insertBefore(newtd, target);
					}
				} else if (dir.value == "1") { //在后操作
					var trs = document.querySelectorAll("table tr");
					for (var i = 0; i < trs.length; i++) {
						var tr = trs[i];
						//目标列
						var target = tr.children[pos.value - 1];
						var newtd = document.createElement("td");
						var next = target.nextElementSibling;
						if (next) {
							target.parentElement.insertBefore(newtd, next);
						} else {
							target.parentElement.appendChild(newtd);
						}

					}
				}
			} else if (operation.value == "1") { //删除
				if (dir.value == "0") { //在前操作
					var trs = document.querySelectorAll("table tr");
					for (var i = 0; i < trs.length; i++) {
						var tr = trs[i];
						//目标列
						var target = tr.children[pos.value - 1];
						var prev = target.previousElementSibling;
						if (prev) {
							prev.remove();
						}
					}
				} else if (dir.value == "1") { //在后操作
					var trs = document.querySelectorAll("table tr");
					for (var i = 0; i < trs.length; i++) {
						var tr = trs[i];
						//目标列
						var target = tr.children[pos.value - 1];
						var next = target.nextElementSibling;
						if (next) {
							next.remove();
						}
					}
				}
			}
		}
	});
};

你可能感兴趣的:(前端,javascript,html)