Js-DOM树和表格操作

权-

已于 2022-04-07 23:40:17 修改

阅读量380

点赞数

文章标签： java

于 2022-04-07 22:54:05 首次发布

本文链接：https://blog.csdn.net/Q_3344/article/details/124029046

版权

Js-DOM树和表格操作

查看节点

访问指定节点的方法：
1.1getElementById( )
1.2getElementsByName( )
1.3getElementsByTagName( )
查看/修改属性节点
2.1getAttribute(“属性名”)
2.2setAttribute(“属性名”,“属性值”)
访问指定节点的方法
3.1getElementById( ) ：返回一个节点对象
3.2getElementsByName( )：返回多个（节点数组）
3.3getElementsByTagName( ) ：返回多个（节点数组）
查看/修改属性节点
4.1getAttribute(“属性名”)
4.2setAttribute(“属性名”,“属性值”)

创建和增加节点

创建和增加节点的方法:
createElement（）：创建节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（）：克隆节点

删除和替换节点

删除和替换节点的方法:
removeChild（）：删除节点
replaceChild( ) ：替换节点

表格相关对象

table表格对象:

属性：
rows 返回包含表格中所有行的一个数组。
方法：
insertRow() 在表格中插入一个新行。
deleteRow() 从表格中删除一行。

tableRow表格行对象

属性：
cells 返回包含行中所有单元格的一个数组。
rowIndex 返回该行在表中的位置。
方法：
insertCell() 在一行中的指定位置插入一个空的标签。
deleteCell() 删除行中指定的单元格。

tableCell单元格对象

属性：
cellIndex 返回单元格在某行单元格集合中的位置。
innerHTML 设置或返回单元格的开始标签和结束标签之间的HTML。
align 设置或返回单元格内部数据的水平排列方式。
className 设置或返回元素的class属性。

课堂案例1：表格的增删改

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.title{
				text-align: center;
				color: red;
				font-size: 40px;
				background-color: pink;
			}
			.row{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="aa" width="500px" height="200px" border="1px" align="center">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr style="text-align: center;">
				<td>十万个为什么</td>
				<td>49</td>
			</tr>
			<tr style="text-align: center;">
				<td>恐怖小说</td>
				<td>20</td>
			</tr>
		</table>
		 <center>
			 <button type="button" onclick="insertRow()">增加1行</button>
			 <button type="button">删除第2行</button>
			 <button type="button" onclick="changTitle()">修改标题样式</button>
		 </center>
	</body>
	<script type="text/javascript">
		//修改标题样式
		function changTitle(){
			//获取标题所在的行
			var row1= document.getElementById("row1");
			//给row1行对象添加class属性，并且属性值是title
			row1.setAttribute("class","title");
		}
		
		//增加行
		function insertRow(){
			//获取到要操作的表格对象	
			var aa=document.getElementById("aa");
			//往下标为2的位置增加一行，并且产生一个新行
			var newRow=aa.insertRow(2);
			//往新增加的行newRow里面增加单元格
			//增加第一个单元格，空的没有内容
			var c0= newRow.insertCell(0);
			c0.innerHTML="杂志";//给第一个单元格赋值
			//增加第二个单元格
			var c1= newRow.insertCell(1);
			c1.innerHTML="25";//给第二个单元格赋值
			
			//设置新增的行的样式
			newRow.setAttribute("class","row");
		}
	</script>
</html>

课堂案例2：订单的增删改

<html>
	<head>
		<meta charset="utf-8">
		<title>修改订单</title>
		<style type="text/css">
			body {
				font-size: 15px;
				line-height: 25px;
			}

			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 400px;
			}

			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
				text-align: center;
			}

			.title {
				font-weight: bold;
				background-color: #cccccc;
			}

			input text {
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			//增加
			function addRow() {
				var sa = document.getElementById("order"); //获取表格
				var sum = sa.rows.length - 1; //获取总行数，不包括最后按钮一行
				var sb = sa.insertRow(sum); //在表格最后位置插入一行
				sb.id = "row" + sum; //给插入的行取一个id
				
				var ca = sb.insertCell(0); //插入第0列
				ca.innerHTML = "<input type='text'>";
				var cb = sb.insertCell(1); //插入第0列
				cb.innerHTML = "<input type='text' style='width:20px'>";
				var cc = sb.insertCell(2); //插入第0列
				cc.innerHTML = "<input type='text' style='width:20px'>";
				var cd = sb.insertCell(3); //插入第0列
				cd.innerHTML = "<input type='button' value='删除' οnclick=\"delRow('" + sb.id +
					"')\"> <input type='button' value='确定' οnclick=\"qdRow('" + sb.id + "')\">";
			}
			//删除
			function delRow(rid) {
				var va = document.getElementById("order"); //根据id获取表格对象
				var sa = document.getElementById(rid); //根据id获取你要删除的行对象
				var index = sa.rowIndex; //根据sa找到该行对象对应的下标
				va.deleteRow(index); //开始删除行
			}
			//确定
			function qdRow(rid) {
				var sa = document.getElementById(rid); //根据id获取你要确定的行
				var sum = sa.cells; //获取该行所有列(文本框)的集合
				//alert(sum.length);
				//alert(sum[0].lastChild.value);
				var ca = sum[0].lastChild.value;
				sum[0].innerHTML = ca;
				var cb = sum[1].lastChild.value;
				sum[1].innerHTML = cb;
				var cc = sum[2].lastChild.value;
				sum[2].innerHTML = cc;

				sum[3].lastChild.value = "修改";
				sum[3].lastChild.setAttribute("onclick", "editRow('" + rid + "')");
			}
			//修改
			function editRow(rid) {
				var sa = document.getElementById(rid);
				var sum = sa.cells;

				var ca = sum[0].innerHTML;
				sum[0].innerHTML = "<input type='text' value='" + ca + "'>";
				var cb = sum[1].innerHTML;
				sum[1].innerHTML = "<input type='text' style='width:20px' value='" + cb + "'>";
				var cc = sum[2].innerHTML;
				sum[2].innerHTML = "<input type='text' style='width:20px' value='" + cc + "'>";

				sum[3].lastChild.value = '确定';
				sum[3].lastChild.setAttribute("onclick", "qdRow('" + rid + "')");
			}
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="order">
			<tr class="title">
				<td>商品名称</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr id="row1">
				<td>北京布鞋</td>
				<td>20</td>
				<td>&yen;568.50</td>
				<td><input name="rowdel" type="button" value="删除" onclick='delRow("row1")' />
					<input name="edit" type="button" value="修改" onclick='editRow("row1")' />
				</td>
			</tr>
			<tr>
				<td colspan="4" style="height:30px;">
					<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
				</td>
			</tr>
		</table>
	</body>
</html>