javaScript 简单的学生信息管理

javaScript 简单的学生信息管理,第1张

哎、 老大、你该不会让 帮你写 毕业试题吧!!!

不过 帮你分析 一下吧!! 我也是 新手!!!

1、首先 创建数据库 (以为你的需求较少 不用写项目文档了 直奔主题好了)

学生表(Students) 学分表(Score)学科表(Greade) 估计这三个就 够用了(不够你在添加、、)

2、(使用JSP 完成)创建 页面 (根据你的需求 创建吧)以及导入数据库 驱动、、、

3、数据库连接类、实体类、 Dao 类、业务类!

4、你的录入,查、修改、分别 用

1、insert into (表名)values(列值)

2、select * (或 列名) from 表名 where =?;

3、delete * from 表名 where=?;

4、关于页面的 验证 你在 创建 jsp 页面时, 添加 javascript 进行 验证 就行了!!

四、到此 分析完了 说实话、这项目 不难、朋友如果你动手的话,也就三四个小时 就K.O了!!

学习 要肯动手!!! 加油啊!!! 傍晚 快乐! 选我 吧!Thanks

虽然不想打击你,但是用js无法实现你要求的功能,而且如果没有基础想学习起来代价比较大

js只是产生一些浏览器的效果,如果要保存数据还需要用到数据库,以及服务器端语言

推荐学习网站w3school,推荐书籍:忘了.....搜下php 圣经 书名大概叫php与mysql编程什么的

首先是html页面的编写:

<!doctype html>

<html ng-app="myModule">

<head>

<meta charset="utf-8">

<title>学生信息管理</title>

//需要用到的一些库,要加载的

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/ng-table/dist/ng-table.js"></script>

<script src="bower_components/ng-table-export/ng-table-export.js"></script>

<link rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" >

<script src="module/scripts/controllers/Form.js"></script>

</head>

<body>

<div ui-view></div>

<div ng-controller="FormController">

<h3>学生信息列表</h3>

<br>

<div>

搜索:<input type="text" ng-model="titleFilter" placeholder="输入关键字">  //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。

</div>

<br>

<table ng-table="tableParams" >

<tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象

<td title="'Name'">

<span ng-if="!student.$edit">{{student.Name}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Name"></div>

</td>

<td title="'Id'">

<span ng-if="!student.$edit">{{student.Id}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Id"></div>

</td>

<td title="'Grade'">

<span ng-if="!student.$edit">{{student.Grade}}</span>

<div ng-if="student.$edit"><input type="text" ng-model="student.Grade"></div>

</td>

<td title="'Actions'" width="200">

<a ng-if="!student.$edit" ng-click="student.$edit=true">Edit</a>

<a ng-if="student.$edit" ng-click="student.$edit=false">Save</a>

<a ng-click="deleteStudent(obj)" ng-if="student.$edit" >Delete</a>

<!-- <a ng-click="addStudent()" ng-if="student.$edit" >Add</a> -->

</td>

</tr>

</table>

<div>

<input type="text" ng-model="newName" placeholder="input Name" required/>

<input type="text" ng-model="newId" placeholder="input Id" required/>

<input type="text" ng-model="newGrade" placeholder="input Grade" required/>

<input type="button" ng-click="addStudent()" value="Add" /> 

</div>

</div>

</body>

</html> 接下来是js代码部分 var myModule=angular.module('myModule',['ngTable']).

controller('FormController',function($scope,ngTableParams,$sce){

$scope.students=[

{Name:'小李',Id:'201401201',Grade:'计算机技术'},

{Name:'李磊',Id:'201401202',Grade:'计算机技术'},

{Name:'夏津',Id:'201401203',Grade:'计算机技术'},

{Name:'杭州',Id:'201401204',Grade:'计算机技术'}

]

$scope.addStudent=function(){       //添加学生函数

$scope.students.push({Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade})

$scope.newName=''

$scope.newId=''

$scope.newGrade=''

}

$scope.deleteStudent=function(student){   //删除一行的内容

$scope.students.splice($scope.students.indexOf(student),1)

}

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11965170.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存