A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 爱编码的J 中级黑马   /  2019-1-17 18:02  /  1003 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

table表格中的常用方法和属性:
deleteRow(行号):删除行
rowIndex:获取当前行数的数值
insertRow(行号):添加一行,行数的值
insertCell(数字):添加的是td单元格,数字代表单元格
parentNode:代表找的是父节点
[HTML] 纯文本查看 复制代码
<!doctype html>[/align]<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table width="600" border="1" id="frm">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
			<td><button>删除</button></td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>20</td>
			<td><button>删除</button></td>
		</tr>
	</table>
	<form action="" name="frm">
		姓名: <input type="text" name="user">
		性别: <input type="text" name="age">
		<input type="submit">
	</form>
	<script>
		var frm=document.getElementById("frm");
		function deltr(obj){
			frm.deleteRow(obj.parentNode.parentNode.rowIndex);
		}
		function addtr(){
			var user=document.frm.user.value;
			var age=document.frm.age.value;
			var index=frm.rows.length;
			var newtr=frm.insertRow(index);
			newtr.insertCell(0).innerHTML=index;
			newtr.insertCell(1).innerHTML=user;
			newtr.insertCell(2).innerHTML=age;
			newtr.insertCell(3).innerHTML='<button>删除</button>';
			index++;
			return false;
		}
	</script>
</body>
</html> 

效果展示:
图片1.png

1 个回复

倒序浏览
看一看。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马