js+html实现对表格的增删改查(适合小白)

js+html实现对表格的增删改查

这两天写了一个简单增删改查,用的是html中的导航框架(frame),基本上靠百度和自学,完成的这个作业。里面的功能还算完整,有一个小bug,不过没有太大的影响,希望对有需要的朋友有点帮助吧!

需要的请加Qq:2108946177

(为了论述简便,只呈现一个模块:角色管理,剩下两个实现原理类似,详细的js和css文件从上方链接获取,因为后期修改的原因,网盘提取的项目页面和所给的页面有点不同)

一、角色管理

项目结构如下

js+html实现对表格的增删改查(适合小白)_第1张图片

代码如下:

1.main.html

<html>	
<frameset cols="270,*">
    <frame noresize="noresize" src="choice.html">
  	<frame noresize="noresize" src="personManage.html" name="showFrame">
  frameset>
frameset> 
html>
2.choice.html


<html>
	<head>
		<meta charset="utf-8">
		<title>选择栏title>
		<style type="text/css">
			*{
      
			margin: 0;
			padding: 0;
				
			}
			a{
      
				text-decoration:none;
				font-size: 20px;
				color:white;
			} 
			li{
       list-style:none;}
			
			#choices{
      
				border:1px solid #c2c2c2;
				width: 270px; 
				height:56px;
				text-align: center;
				line-height: 56px;
				float: left;
				
			}
			#choices:hover{
      				
				width: 270px;
				height: 56px;
				background:url(img\\backline.png);
				float: left;
			}
			a{
      
				font-size: 16px;
			}
		style>
	head>
	<body bgcolor="#c2c2c2">
			<div id="logo" style="background-color: #fff;width: 270px;height: 56px;">
				<img src="img\logo.png"/>
			div><br/>
				<div id="choices" >
					<li><a href="personManage.html" target="showFrame">角色管理a>li>
				div>
				
				
				<div id="choices">
					<li><a href="bookManage.html" target="showFrame">图书管理a>li>
				div>
				
					<img src="img\line.png"/>
				<div id="choices">
					<li><a href="roomManage.html" target="showFrame">住宿管理a>li>
				div>							
	body>
html>
3.personManage.html


<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理title>
		<script type="text/javascript" src="js/personManageJS.js">script>
		<link rel="stylesheet" type="text/css" href="css/personManageCSS.css">
	head>
	<body bgcolor="#eeeeee">
		<font style="position:absolute;right: 400px;color:blue">左帅,您好font>
		
		<font style="position:absolute;right: 246px;">修改密码font>
		<img src="img\修改密码.png" style="position:absolute;right: 308px;"/>
		
		<font style="position:absolute;right: 124px;">重新登录font>
		<img src="img\重新登录.png" style="position:absolute;right: 186px;"/>
		
		<font style="position:absolute;right: 2px;">退出系统font>
		<img src="img\退出系统.png" style="position:absolute;right: 64px;"/>
		
		<br/><h2>角色管理h2>
		
		<button id="btn1" onclick="show_InsertFrame();close_UpdateFrame();">添加button>
		
		<button id="btn2" onclick="del();">删除button>
		
		<button id="btn2" onclick="show_UpdateFrame();close_InsertFrame();">修改button>
		    
		<input type="text" id="FindByInputId" value="请输入要查询的编号" onfocus="if(value=='请输入要查询的编号')value=''" onblur="if(!value)value='请输入要查询的编号'"/>
		<button id="btn2" onclick="findMethod();">搜索button>
		<button id="btn1" onclick="showTbody();">搜索返回button><br/><br/>
		
		<table id="Table" cellpadding="5" cellspacing="0" width="68%" border="0">
			<thead>
				<tr bgcolor="#c0c0c0">
					<td>选中td>
					<td>编号td>
					<td>姓名td>
					<td>年龄td>
					<td>职务td>
					<td>住址td>
				tr>
			thead>
			<tbody id="listTable">
				<tr>
					<td><input type="checkbox" name="item" />td>
					<td>001td>
					<td>左帅td>
					<td>21td>
					<td>学生td>
					<td>二社区td>
				tr>
				<tr>
					<td><input type="checkbox" name="item" />td>
					<td>002td>
					<td>小周td>
					<td>20td>
					<td>学生td>
					<td>尚壁镇td>
				tr>
				
				<tr>
					<td><input type="checkbox" name="item" />td>
					<td>003td>
					<td>小寻td>
					<td>23td>
					<td>学生td>
					<td>左渡村td>
				tr>
				<tr>
					<td><input type="checkbox" name="item" />td>
					<td>004td>
					<td>小宁td>
					<td>18td>
					<td>学生td>
					<td>二社区td>
				tr>
				<tr>
					<td><input type="checkbox" name="item" />td>
					<td>005td>
					<td>冬冬td>
					<td>23td>
					<td>学生td>
					<td>浙江td>
				tr>
			tbody>
		table><br/>
		<div id="InsertFrame" style="display:none;position:absolute;right:0px;top: 100px; text-align: center; border:1px solid #fff;width: 330px;height: 350px;background-color: #c0c0c0;">	
				<div id="closePicture" style="float: right;">
					<img src="img\页面关闭图标.png" title="关闭" onclick="close_InsertFrame();"/>
				div>
				   
				<h3>添加角色信息h3>
				编号: <input class="Input" type="text" id="addpersonId"/><br/>
				姓名: <input class="Input" type="text" id="addname"/><br/>
				年龄: <input class="Input" type="text" id="addage"/><br/>
				职务: <input class="Input" type="text" id="addjob"/><br/>		
				住址: <input class="Input" type="text" id="addaddress"/><br/><br/>												
				    			
				<input id="btn1" type="button" value="重置" onclick="addReset();"/>				
				      
				<input id="btn2" type="button" value="添加" onclick="add();close_InsertFrame();"/>			 
		div>
		
		<div id="UpdateFrame" style="display:none;position:absolute;right:0px;top: 100px; text-align: center; border:1px solid #fff;width: 330px;height: 350px;background-color: #c0c0c0;">	
				<div id="closePicture" style="float: right;">
					<img src="img\页面关闭图标.png" title="关闭" onclick="close_UpdateFrame();"/>
				div>
				   
				<h3>修改角色信息h3>
				编号: <input class="Input" type="text" id="updatepersonId"/><br/>
				姓名: <input class="Input" type="text" id="updatename"/><br/>
				年龄: <input class="Input" type="text" id="updateage"/><br/>
				职务: <input class="Input" type="text" id="updatejob"/><br/>		
				住址: <input class="Input" type="text" id="updateaddress"/><br/><br/>												
				    			
				<input id="btn1" type="button" value="重置" onclick="updateReset();"/>
				      
				<input id="btn2" type="button" value="修改" onclick="update();close_UpdateFrame();"/>			 
		div>
	body>
html>


页面效果如下:
main.html(框架主页面)

js+html实现对表格的增删改查(适合小白)_第2张图片

choice.html(左侧选择栏)

js+html实现对表格的增删改查(适合小白)_第3张图片

personManage.html(角色管理具体操作及效果)

附上操作动图:
js+html实现对表格的增删改查(适合小白)_第4张图片

如果对您有帮助,请我喝杯奶茶吧!

感谢老板,嘻嘻

微信

js+html实现对表格的增删改查(适合小白)_第5张图片

支付宝

js+html实现对表格的增删改查(适合小白)_第6张图片

你可能感兴趣的:(web前端,js+html,js,html)