JavaScript表格添加删除

最新推荐文章于 2024-10-01 19:00:00 发布

Lvdon9

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量320

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85239442

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
	var oTab=document.getElementById('tab1');
	var oBtn=document.getElementById('btn1');
	var oTxt=document.getElementById('txt1');
	//序号第几个
	var iNowId=oTab.tBodies[0].rows.length+1;
	oBtn.onclick=function()
	{
		//创建一个tr
		var oTr=document.createElement('tr');
		var oTd=null;
		
		oTd=document.createElement('td');
		oTd=innerHTML=iNowId++;
		oTr.appendChild(oTd);
		
		oTd=document.createElement(td);
		oTd.innerHTML=oTxt.value;
		oTr.appendChild(oTd);
		
		oTd=document.createElement('td');
		oTd.innerHTML='<a href="javascript:;">删除</a>';
		oTr.appendChild(oTd);
		//删除
		oTd.getElementsByTagName('a')[0].onclick=function()
		{
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		};
		
		oTab.appendChild(oTr);
		
	};
}
</script>
</head>

<body>
	<input id='txt1' type="text" />
	<input id='btn1' type='button' value="添加" />
	
	<table  id="tab1" border="1" width="400">
		<thead>
			<td>ID</td>
			<td>姓名</td>
			<td>操作</td>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>blue</td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td>Leo</td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td>默默</td>
				<td></td>
			</tr>
			<tr>
				<td>4</td>
				<td>aaa</td>
				<td></td>
			</tr>
			<tr>
				<td>5</td>
				<td>bbb</td>
				<td></td>
			</tr>
			<tr>
				<td>6</td>
				<td>ccc</td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>