第二步，在body元素添加ng-controller指令，并在里面添加<table></table>
第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器
第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮
第五步，在控制器中添加变量model，这个变量赋值数组
第六步，在表格table循环model变量，遍历该数组并给表格赋值
注意事项
注意AngularJS动态获取表格数据
注意AngularJS动态赋值
①首先获得选中复选框的那一行或者多行数据，这个用，具体的代码要看你的网站结构通过jquery选择器和each循环都可以获得。$("input:checkbox[name='the checkbox name']:checked")....
②在each循环中，把获取到的每一行，每个单元格的数据，通过jquery的append()的方法，动态创建，添加到另一个表格中即可。插入的位置可以用不同的方法，append(）是追加到后面。还有一些insertbefore()等可参见jquery文档。
<!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 = 0i <data.lengthi++)
{
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 = "学号,姓名,性别,语文,数学,<a href="https://www.baidu.com/s?wd=%E8%8B%B1%E8%AF%AD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Ydm1bdPAcdmWPbPjDsuyw90ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnH0YP1fzP1Rkn1ckrHTdrj6drf" target="_blank" class="baidu-highlight">英语</a>".split(",")
for (var i = 0i <str.lengthi++)
{
var th = document.createElement("th")
th.innerHTML = str[i]
tr.appendChild (th)
}
for (var i = 0i <students.lengthi++)
{
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条）