星期三，今天早上上了四节JS课程，下午听健康讲座，晚上装系统

　　星期三，今天早上上了四节JS课程，下午听健康讲座，晚上装系统。我想说装系统是最浪费时间的，以前大一的时候，有一段时间喜欢上装系统，我去有时候一个系统装了两三天，因为有很多问题。 ~ 后面就不研究了，昨天中午换了四g内存了，就把win8换成64位的了。
　　JS主要教的是试用DOM操作表格。rows[] insertRow() deleteRow() TableRow对象：cells[] rowIndex insertCell() deleteCell() TableCell对象的属性：cellIndex innerHTML align className

　　下面是我写的代码 ，但是还不行，在优化~ 有很多问题。 `

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MyHtml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	</head>
	<script type="text/javascript">
	//参数num代表当前要处理的表格下标
	function editTR(num) {
		var table1 = document.getElementById("table1");
		var tr1 = table1.rows[num];
		var td13 = tr1.cells[3];
		var button2 = td13.childNodes[1];
		if (button2.innerHTML == "修改") {
			button2.innerHTML = "确定";
			var td11 = tr1.cells[1];
			var count = td11.innerHTML;
			td11.innerHTML = "<input style='width :40px' type='text' value='"
					+ count + "'>";
		} else {
			button2.innerHTML = "修改";
			var td11 = tr1.cells[1];
			var input_num = td11.childNodes[0];
			td11.innerHTML = input_num.value;
		}
	}
	function delTR(num) {
		var table1 = document.getElementById("table1");
		table1.deleteRow(num);

	}
	function addTR() {

		var table1 = document.getElementById("table1");
		var length = table1.rows.length - 1;
		var newTR = table1.insertRow(length);
		newTR.align = "center";
		var td0 = newTR.insertCell(0);
		var td1 = newTR.insertCell(1);
		var td2 = newTR.insertCell(2);
		var td3 = newTR.insertCell(3);

		td0.innerHTML = "新增商品" + length;
		td1.innerHTML = "10";
		td2.innerHTML = "1";
		td3.innerHTML = "<button onclick='delTR(" + length
				+ ")'>删除</button> <button onclick='editTR(" + length
				+ ")'>修改</button>";

	}
</script>
	<body>
		<table id="table1" border="1" align="center" cellspacing="0"
			cellpadding="0">
			<tr align="center" style="background-color: gray">
				<td>
					商品名称
				</td>
				<td>
					数量
				</td>
				<td>
					价格
				</td>
				<td>
					操作
				</td>
			</tr>
			<tr align="center">
				<td>
					水
				</td>
				<td>
					5
				</td>
				<td>
					2
				</td>
				<td>
					<button onclick="delTR(1)">
						删除
					</button>
					<button onclick="editTR(1)">
						修改
					</button>
				</td>

			</tr>
			<tr align="center">
				<td colspan="4">
					<button onclick="addTR()">
						新增订单
					</button>
				</td>
			</tr>
		</table>

	</body>
</html>

　　

 

posted on 2013-03-21 07:51  Jerome_s  阅读(122)  评论(0)    收藏  举报

导航