<script>
var div1 = document.getElementById('DIV1')
var code = '<TABLE>'
code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code + '</TABLE>'
</script>
<body>
<div id='div1'></div>
</body>
但通常来说，开发者习惯动态的去添加行而非动态生成表格，因为表头基本都是固定的，每次都刷影响效率，故代码如下：
<script>
var div1 = document.getElementById('tb1')
var code = ''
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code
</script>
<body>
<div>
<table>
<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>
<TBODY id='tb1'></TBODY>
</table>
</div>
</body>
首先是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)
}
})
<!DOCTYPE HTML><html>
<head>
<meta charset=UTF-8>
<title>table</title>
<style>
table {
margin:auto
width: 60%
border: 1px solid black
border-collapse: collapse
}
table caption {
color: blue
font: 34px consolas bold
}
table th, table td {
border: 1px solid black
text-align:center
}
table th {
font: 20px consolas bold
background-color: gray
}
table tr:nth-child(n+2){
background-color: cyan
}
table tr:nth-child(2n+2) {
background-color: red
}
</style>
<script>
var data = [
{id: "001", fullname: "张三", sex: "男", score: [98,33,48]},
{id: "002", fullname: "李四", sex: "w", score: [11,22,33]},
{id: "003", fullname: "kyo", sex: "m", score: [22,33,55]},
{id: "004", fullname: "yamazaki", sex: "w", score: [99, 100, 80]}
]
var Student = function (id, fullname, sex, score)
{
this.id = id
this.fullname = fullname
this.sex = sex
this.score = score
}
var Score = function (chinese, math, english)
{
this.chinese = chinese
this.math = math
this.english = english
}
var students = []
for (var i = 0 i < data.length i++)
{
var d = data[i]
var s = d["score"]
students.push(new Student (d["id"], d["fullname"], d["sex"], new Score(s[0], s[1], s[2])))
}
onload = function ()
{
var table = document.createElement("table")
var tbody = document.createElement("tbody")
table.appendChild(tbody)
var caption = table.createCaption()
caption.innerHTML = "学生成绩表"
var tr = tbody.insertRow (0)
var str = "学号,姓名,性别,语文,数学,英语".split(",")
for (var i = 0 i < str.length i++)
{
var th = document.createElement("th")
th.innerHTML = str[i]
tr.appendChild (th)
}
for (var i = 0 i < students.length i++)
{
var tr = tbody.insertRow (tbody.rows.length)
var obj = students[i]
for (var p in obj)
{
var op = obj[p]
if (p != "score")
{
var td = tr.insertCell (tr.cells.length)
td.innerHTML = op
}
else
{
for (var p in op)
{
var td = tr.insertCell (tr.cells.length)
td.innerHTML = op[p]
}
}
}
}
document.body.appendChild(table)
}
</script>
<body>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）