使用js创建一个动态表格

最新推荐文章于 2024-06-28 15:04:44 发布

孤雁yi南飞

最新推荐文章于 2024-06-28 15:04:44 发布

阅读量1.2w

点赞数 2

分类专栏： javaScript

本文链接：https://blog.csdn.net/guyan1111/article/details/53675494

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个使用js创建的一个动态表格，内容含有添加插入一个表格，删除表格的一行和全部。界面如图suos

代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态表格</title>
//增加表格头的样式
<style type="text/css">
		#list th{
			background-color:#06F;
			}
</style>
</head>

<body>
<table border="1" align="center" width="500PX">
	<thead>
    //创建表格头
	<tr id="list">
        <th>选中</th>	
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
	</tr>
    //添加全部删除按钮，
    <tr>
    	<td ><input type="checkbox" οnclick="checkAll(this)" /></td>
        <td colspan="6" ><a href="javascript:void(0)" οnclick="delAll()">全部删除</a></td>
    </tr>
    </thead>
    <tbody id="listbody"></tbody>
</table>
//用于画一个横线
<hr/>
//创建form表单
<form >
	<table align="center" border="1" width="300px">
    	<tr>
        	<th >编号</th>
            <td> <input type="text" id="id" /></td>
        </tr>
        <tr>
        	<th>姓名</th>
          <td> <input type="text" id="name" /></td>
        </th>
        <tr>
        	<th>密码</th>
           <td> <input type="text" id="pass" /></td>
        </tr>
        <tr>
        	<th>年龄</th>
            <td> <input type="text" id="age" /></td>
        </tr>
        <tr>
        	<th>住址</th>
            <td> <input type="text" id="address" /></td>
        </tr>
        <tr>
        	<td colspan="2" align="center">
                <input type="reset" value="重置" align="center" />
                <input type="button" value="添加" align="center" οnclick="addlist()"/>
            </td>
        </tr>
    
    </table>

</form>

</body>
<script type="text/javascript">
	function addlist(){
		//获取用户输入
		var id=document.getElementById("id").value;
		var name = document.getElementById("name").value;
		var pass = document.getElementById("pass").value;
		var age = document.getElementById("age").value;
		var address = document.getElementById("address").value;
		//在上面的列表中添加一行，把内容放在该行1
		/*
		 <tr>
			<td><input type="checkbox" name="item"/></td>
			<td>1</td>
			<td>张三</td>
			<td>123456</td>
			<td>20</td>
			<td>广州天河</td>
			<td><a href="javascript:void(0)" οnclick="delOne(this)">删除</a></td>
			    javascript:void(0): 相当于让href属性失效！！
    	</tr>
		*/
		//创建一个tr
		var tr = document.createElement("tr");
		//创建td
		var td1 = document.createElement("td");
		var input = document.createElement("input");
		input.setAttribute("type","checkbox");
		input.setAttribute("name","item");
		td1.appendChild(input);
		
		var td2 = document.createElement("td");
		td2.innerHTML = id;
		
		var td3 = document.createElement("td");
		td3.innerHTML = name;
		
		var td4 = document.createElement("td");
		td4.innerHTML = pass;
		
		var td5 = document.createElement("td");
		td5.innerHTML = age;
		
		var td6 = document.createElement("td");
		td6.innerHTML = address;
		
		var td7 = document.createElement("td");
		var a = document.createElement("a");
		
		a.setAttribute("href","javascript:void(0)");//相当于让href属性失效！
		a.setAttribute("onclick","delone(this)")
		a.innerHTML = "删除";
		td7.appendChild(a);
		//将创建的td添加到tr中
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tr.appendChild(td6);
		tr.appendChild(td7);
		//使用appendChild（tr）方法，将tr添加到listbody中
		//其中获取的listbody是要将表格添加的位置的id
		var listbody = document.getElementById("listbody");
		listbody.appendChild(tr);
		
		}
		//删除单行
		function delone(d){
			var tr = d.parentNode.parentNode;
			var listbody  = document.getElementById("listbody");
			listbody.removeChild(tr);
			
			}
			//全选
			
			function checkAll(c){
				//得到全选按钮的状态
				var status = c.checked;
				//得到name=item的标签
				var items = document.getElementsByName("item");
				for(var i=0;i<items.length;i++){
					//将全选按钮的状态给所有的items
					items[i].checked=status;
					
					}
				}
				//删除选中部分，注意变量，每删除一个，要将变量减一，否则，将导致变量溢出，浏览器死机
		function delAll(){
			
			var list = document.getElementById("listbody");
			//拿到所有的item
			var items = document.getElementsByName("item");
			for(var j=0;j<items.length;j++){
				
				if(items[j].checked)//如果item被选中
				{
					
					var tr = items[j].parentNode.parentNode;
					list.removeChild(tr);
					j--;
				}
			}
			}
			
</script>
</html>

孤雁yi南飞

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
使用js创建一个动态表格

这是一个使用js创建的一个动态表格，内容含有添加插入一个表格，删除表格的一行和全部。界面如图suos代码如下：动态表格//增加表格头的样式 #list th{ background-color:#06F; } //创建表格头选中编号姓名密码年
复制链接

扫一扫

专栏目录