Html为什么用JavaScript动态创建表格节点会自动消失

最新推荐文章于 2022-08-30 15:24:49 发布

currentone

最新推荐文章于 2022-08-30 15:24:49 发布

阅读量505

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/currentone/article/details/90529168

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>写出如下图表单及表单控件</title>
		<link rel="stylesheet" href="css/Test3_4.css" />
		<script type="text/javascript" src="js/Test3_4.js" ></script>
	</head>
	<body >
		<form method="get" action="" enctype="">
			<table border="solid 1px black" cellspacing="0px" cellpadding="5px" class="c6">
				<tr>
					<td colspan="2" class="c">用户信息</td>
				</tr>
				<tr>
					<td class="c1"><span class="c2">&lowast;</span>姓名</td>
					<td class="c1"><input type="text" name="uname" value=""/></td>
				</tr>
				<tr>
					<td class="c1"><span class="c2">&lowast;</span>性别</td>
					<td class="c1"><input type="radio" name="usex" value="男" class="cc"/>男
									<input type="radio" name="usex" value="女" checked="checked" class="ccc"/>女</td>
				</tr>
				<tr>
					<td class="c1"><span class="c2">&lowast;</span>出生日期</td>
					<td class="c1"><input type="text" name="year" value="" size="4"/>年<input type="text"name="month" value=""size="4"/>月</td>
				</tr>
				<tr>
					<td class="c1"><span class="c2">&lowast;</span>所在城市</td>
					<td class="c1"><select class="ccx">
									<option value="广州">广州</option>
									<option value="深圳">深圳</option>
									<option value="杭州">杭州</option>
									<option value="上海">上海</option>
									<option value="北京">北京</option>
									</select>
					</td>
				</tr>
				<tr>
					<td colspan="2"class="c1"><input type="submit" value="提交" class="c4" onclick="getss()"/><input type="submit" value="重置"class="c5"/></td>
				</tr>
			</table>
		</form>
		<!--加入一个表格储存信息-->
		<table border="solid 1px black" cellspacing="0px" cellpadding="0px" class="c66">
			<p class="thead1">用户信息表格</p>
			<tr>
				<td class="c1"><input type="checkbox" name="item" value="" onclick="allget()"/>全选</td>
				<td class="c1">姓名</td>
				<td class="c1">性别</td>
				<td class="c1">出生日期</td>
				<td class="c1">所在城市</td>
				<td class="c1">操作</td>
			</tr>
			<!--<tr>
				<td class="c1"><input type="checkbox" name="item" value=""/></td>
				<td>张三</td>
				<td>男</td>
				<td>2001年4月</td>
				<td>深圳</td>
				<td class="cx1">编辑|删除</td>
			</tr>
			<tr>
				<td class="c1"><input type="checkbox" name="item" value=""/></td>
				<td>李四</td>
				<td>男</td>
				<td>2001年12月</td>
				<td>广州</td>
				<td class="cx1">编辑|删除</td>
			</tr>
			<tr>
				<td class="c1"><input type="checkbox" name="item" value=""/></td>
				<td>小明</td>
				<td>女</td>
				<td>2010年6月</td>
				<td>上海</td>
				<td class="cx1">编辑|删除</td>
			</tr>-->
		</table>
		<p class="cx2"><input type="button" value="删除选中" onclick="delss()" /></p>
	</body>
</html>


//全选反全选
function allget(){
	//获取全选项目对象包括下面选项对象
	var c=document.getElementsByName("item");
	if(c[0].checked==true){
		for(var i=1;i<c.length;i++){
			c[i].checked=true;
		}
	}else{
		for(var i=1;i<c.length;i++){
			c[i].checked=false;
		}
	}
}
//删除相关信息
function delss(){
	//遍历节点对象
	var s=document.getElementsByName("item");
	//友好提示标签
	var tag=0;
	for(var i=1;i<s.length;i++){//派出全选标题,从下面开始
		if(s[i].checked==false){
			tag++;
			if(tag==(s.length-1)){//tag刚好等于选项个数，减一是排除全选选项
			alert("尚未选择选项，请选择选项再删除！");
			}
		}
		if(s[i].checked==true){
			//代表选中，选获取父父节点，再删除子节点
			var parents=s[i].parentNode.parentNode.remove(s[i].parentNode);
			//由于删除特性，再i--
			i--;
		}
		
	}
}
//提交表单存下来
function getss(){
	//提交的时候，创建相应的变量接收相应属性
	var uname=document.getElementsByName("uname")[0].value;
	var usex=document.getElementsByName("usex")[0].value;
	var date1=document.getElementsByName("year")[0].value+"年"+document.getElementsByName("month")[0].value+"月";
	var city=document.getElementsByClassName("ccx")[0].value;
	//创建节点，并存到表格中
	var node=document.createElement("tr");
	node.innerHTML="<tr>"
					+"<td class='c1'><input type='checkbox' name='item' /></td><td class='c1'>"+uname+"</td>"
					+"<td class='c1'>"+usex+"</td><td class='c1'>"+date1+"</td><td class='c1'>"+city+"</td>"
					+"<td class='c1'><input type='button'  value='编辑' class='c2'/>｜<input type='button' value='删除'/></td></tr>";
	document.getElementsByClassName("c66")[0].appendChild(node);
}

*{
	margin:0px;
	padding:0px;
}
.c6{
	margin: 0px auto;
	margin-top: 30px;
}
.c66{
	height:auto;
	margin: 0px auto;
	margin-top: 0px;
}
.c{
	
	text-align: center;
	font-size: 30;
	font-weight: bolder;
}
.c1{
	
	text-align: left;
	font-size: 20;
	font-weight: bolder;
}
.c2{
	color: red;
	padding-left: 20px;
}
.cc{
	margin-right: 3px;
}
.ccc{
	margin-left: 3px;
}
.c4{
	margin-left: 30px;
	margin-right: 90px;
}
.c5{
	margin-right:65px;
}
.thead1{
	margin:0px auto;
	text-align: center;
	font-size: 25px;
	font-weight: bolder;
}
.cx{
	
	text-align: left;
	font-size: 20;
	font-weight: bolder;
}
.cx1{
	color:blueviolet;
}
.cx2{
	margin:0px auto;
	text-align: center;
}
.ccx{
	
}

上面是萌新我的html,js和css文件，请大佬有空的帮忙看一下，不胜感激QAQ

currentone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html为什么用JavaScript动态创建表格节点会自动消失

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>写出如下图表单及表单控件</title> <link rel="stylesheet" href="css/Test3_4.css" /> <script type="te...
复制链接

扫一扫

专栏目录