录入姓名完成座位表，学习前端的小伙伴可以关注一波，用js+html+css构成

这篇文章要给大家讲解一下关于座位表录入的效果！

那么这个效果要考虑到时候横纵问题因为录入是要横向还是纵向录入的问题。

先上效果图让我们看一下大致效果！

 通过在input中输入让下面的每一个框框都可以获取到，这就要用到监听事件。

录入要给他写一个点击事件，将input框里的值赋值到下面的长方形框里。

大致就是这些步骤啦！

我们开始上css吧！

*{
				margin:0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			div{
				background: pink;
				width:900px;
				height: 360px;
				overflow: hidden;
				margin:0 auto;
			}
			input{
			
				color: black;
			}
			span{
				margin-top:30px;
				font-size:30px ;
				
			}
			ul>li{
				width: 140px;
				height:55px;
				background: antiquewhite;
				margin-top:5px;
				margin-right:10px ;
				float: left;
			}

接下来就是HTML

<div>
			<span>请录入姓名完成座位表</span>
			<input type="text"value="请输入姓名" />
			<button>录入</button>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

 最后，就上JS

var oinp=document.getElementsByTagName("input")[0];
		var oli=document.getElementsByTagName('li');
		var obtn=document.getElementsByTagName('button')[0];
		var a=0;//定义一个空变量
		obtn.onclick=function(){
			oli[a].innerHTML =oinp.value;//通过点击按钮，将input框的值赋值到长方形框里
			a++;
}