Dom表格初劣制作

最新推荐文章于 2022-10-22 15:37:24 发布

王凯华

最新推荐文章于 2022-10-22 15:37:24 发布

阅读量141

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/baidu_39016558/article/details/86582874

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

代码啰嗦，繁杂，封装太难
怎么简单怎么作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;}
		th,td{line-height: 35px;text-align: center;border: 1px solid gray;}
	</style>
	<script type="text/javascript">
		/*
			1.点击“添加”按钮，在表格中添加员工信息
			2.实现图片时钟
		*/
	</script>
</head>
<body>
	编号：<input type="text" id="ipt1">
	姓名：<input type="text" id="ipt2">
	年龄：<input type="text" id="ipt3">
	住址：<input type="text" id="ipt4">
	<button id="btn">添加</button>

	<!-- <table>
		
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>住址</th>
			
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>1000</td>
			<td>Jack</td>
			<td>20</td>
			<td>瑞达路</td>
		</tr>
		<tr>
			<td>1000</td>
			<td>Jack</td>
			<td>20</td>
			<td>瑞达路</td>
		</tr>
		<tr>
			<td>1000</td>
			<td>Jack</td>
			<td>20</td>
			<td>瑞达路</td>
		</tr>
		<tr>
			<td>1000</td>
			<td>Jack</td>
			<td>20</td>
			<td>瑞达路</td>
		</tr>
	 </tbody> -->

		<script type="text/javascript">
			 //获取输入框
			 var aipt1=document.getElementById('ipt1');
			 var aipt2=document.getElementById('ipt2');
			 var aipt3=document.getElementById('ipt3');
			 var aipt4=document.getElementById('ipt4');

			 //判断输入内容是否为空
			 aipt1.value=='';
			 aipt2.value=='';
			 aipt3.value=='';
			 aipt4.value=='';	
			 //获取按钮
			 var abtn=document.getElementById('btn');

			 //创建table表格
			 var table=document.createElement('table');
			 //创建表头
			 var tr=document.createElement('tr');
			 //创建内容
			 var th1=document.createElement('th');
			 th1.innerHTML='编号：';
			 var th2=document.createElement('th');
			 th2.innerHTML='姓名：';
			 var th3=document.createElement('th');
			 th3.innerHTML='年龄：';
			 var th4=document.createElement('th');
			 th4.innerHTML='住址：';
			 //把th加入tr中
			 tr.appendChild(th1);
			 tr.appendChild(th2);
			 tr.appendChild(th3);
			 tr.appendChild(th4);

			 //把tr加入table表格中
			 table.appendChild(tr);

			 //table加入body中
			 // document.body.appendChild(table);

			 //添加点击事件
			 abtn.onclick=function(){
	                

				 // cose(aipt1.value,aipt2.value,aipt3.value,aipt4.value,);
				 //判断输入框是否为空
				 if (aipt1.value==''||aipt2.value==''||aipt3.value==''||aipt4.value=='') {
				 	  alert('收入为空');
				 	  return;  //结束函数
				 } 
				 //table加入body中
				 document.body.appendChild(table);

				 var tr1=cose(aipt1.value,aipt2.value,aipt3.value,aipt4.value);
				 //将tr1的值加入table
				 table.appendChild(tr1);

				//清空输入框
					aipt1.value='';
					aipt2.value='';
					aipt3.value='';
					aipt4.value='';
			 }



			 //创建函数
			 function  cose(id,name,age,adrs){
			 	//创建tr
			 	var tr=document.createElement('tr');
			 	//创建td
			 	var td1=document.createElement('td');
			 	td1.innerHTML=id;
			 	var td2=document.createElement('td');
			 	td2.innerHTML=name;
			 	var td3=document.createElement('td');
			 	td3.innerHTML=age;
			 	var td4=document.createElement('td');
			 	td4.innerHTML=adrs;

			 	//将td加入tr
			 	tr.appendChild(td1);
			 	tr.appendChild(td2);
			 	tr.appendChild(td3);
			 	tr.appendChild(td4);

			 	//将tr加入table
			 	// table.appendChild(tr);

			 	return tr;
			 }


		</script>
	 </body>
</html>

王凯华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom表格初劣制作

代码啰嗦，繁杂，封装太难怎么简单怎么作&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&a
复制链接

扫一扫