用jQuery重写之前的student数据
html
<!DOCTYPE html>
姓名： 年龄： 性别： 添加
| 姓名 | 年龄 | 性别 | 操作 |
|---|
JS
$(function() {
var data;
// 1. 获取数据
if(localStorage.data === undefined) {
$.ajax({
url: ‘./../data/data.json‘,
type: ‘get‘,
success: function(dataFromServer) {
data = dataFromServer;
localStorage.data = JSON.stringify(data);
showTable();
}
});
} else {
data = JSON.parse(localStorage.data);
showTable();
}
// 添加学生
$(‘#add‘).on(‘click‘, function() {
var stu = {
name: $(‘#name‘).val(),
age: $(‘#age‘).val(),
gender: $(‘#gender‘).val()
};
$(‘input‘).val(‘‘);
data.push(stu);
localStorage.data = JSON.stringify(data);
showTable();
});
// 删除
$(‘#tbody‘).on(‘click‘, ‘.delete‘, function() {
var index = this.parentNode.parentNode.sectionRowIndex;
// 删掉data数组中对应的那一项
data.splice(index, 1);
localStorage.data = JSON.stringify(data);
showTable();
});
// 修改姓名
$(‘#tbody‘).on(‘click‘, ‘.name‘, function() {
onChangeBtnClick(this, 0, ‘name‘);
});
// 修改年龄
$(‘#tbody‘).on(‘click‘, ‘.age‘, function() {
onChangeBtnClick(this, 1, ‘age‘);
});
// 点击修改XX按钮
function onChangeBtnClick(btn, tdIndex, prop) {
var $tr = $(btn).parent().parent();
var $td = $tr.children().eq(tdIndex);
// console.log($td);
$td.html(‘<input type="text" value="‘ + $td.text() + ‘">‘);
var $operateTd = $(btn).parent();
$operateTd
.empty()
.append($(‘<button>确定</button>‘).on(‘click‘, function() {
var newValue = $td.children().eq(0).val();
var index = $tr.get(0).sectionRowIndex;
// console.log(newValue, index);
data[index][prop] = newValue;
localStorage.data = JSON.stringify(data);
showTable();
}))
.append($(‘<button class="cancel">取消</button>‘))
}
// 取消修改
$(‘#tbody‘).on(‘click‘, ‘.cancel‘, showTable);
// 显示表格
function showTable() {
$(‘#tbody‘).empty();
$.each(data, function(i, n) {
// console.log(i);
// console.log(n);
// console.log(this);
// console.log(‘========‘);
$(‘<tr></tr>‘)
.append($(
‘<td>‘ + n.name + ‘</td>‘
+ ‘<td>‘ + n.age + ‘</td>‘
+ ‘<td>‘ + n.gender + ‘</td>‘
+ ‘<td><button class="delete">删除</button><button class="name">修改姓名</button><button class="age">修改年龄</button></td>‘))
.appendTo($(‘#tbody‘))
});
}
});
jQuery写轮播
$(function() {
$(‘#wrap‘).data(‘index‘, 0);
$(‘#nav‘).on(‘click‘, ‘li‘, function() {
// 清除自动播放的定时器
clearInterval(timer);
var that = this;
var index = $(this).index();
// 把当前要显示的图片的索引号，保存到附加数据中
$(‘#wrap‘).data(‘index‘, index).animate({
left: index * (-430)
}, 600, function() {
$(‘#nav li‘).removeClass(‘selected‘);
$(that).addClass(‘selected‘);
// 重启自动播放的定时器
timer = setInterval(autoPlay, 2000);
});
});
var timer = setInterval(autoPlay, 2000);
function autoPlay() {
// console.log(123);
// 获取当前的index
var currentIndex = $(‘#wrap‘).data(‘index‘);
// 下一张的index
var nextIndex;
if(currentIndex === $(‘#wrap img‘).length - 1) {
nextIndex = 0;
} else {
nextIndex = currentIndex + 1;
}
// console.log(nextIndex);
$(‘#wrap‘).data(‘index‘, nextIndex).animate({
left: nextIndex * (-430)
}, 600, function() {
$(‘#nav li‘).removeClass(‘selected‘).eq(nextIndex).addClass(‘selected‘);
});
}
});
handlebars 模版引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>handlebars</title>
<style>
.big {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 100px;
position: relative;
}
.small {
width: 50px;
height: 50px;
border: 1px solid green;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/x-handlebars-template">
<h1>Hello</h1>
<h2>Handlebars</h2>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
</tbody>
</table>
<p>hello, {{name}}</p>
<p>{{hello}}</p>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
{{#each listOfStudents}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
{{/each}}
</tbody>
</table>
<p>hello, {{{person.a.name}}}</p>
<p>hello, {{person/a/name}}</p>
<div class="big">
<div class="small">
2
</div>
</div>
<div class="big">
<div class="small">
3
</div>
</div>
<div class="big">
<div class="small">
4
</div>
</div>
{{circle name}}
{{circle name}}
{{circle name}}
</script>
<script src="./js/handlebars-v4.0.5.js"></script>
<script>
// 获取模板的源代码
var source = document.getElementById(‘template‘).innerHTML;
// 把模板的源代码，编译成模板对象
var template = Handlebars.compile(source);
// 创建helper
Handlebars.registerHelper(‘circle‘, function(data) {
// return ‘<div class="big"><div class="small">‘ + data + ‘</div></div>‘;
// 告诉系统，这个返回值要解析成真正的标签
var obj = new Handlebars.SafeString(‘<div class="big"><div class="small">‘ + data + ‘</div></div>‘);
return obj;
});
// 通过模板对象，获取最终html代码
var html = template({
person: {
a: {
name: ‘Tom<input type="text">‘
},
b: ‘hello‘
},
name: ‘Bob‘,
age: 20,
gender: ‘male‘,
test: ‘hello‘,
listOfStudents: [
{
name: ‘bob‘,
age: 20,
gender: ‘male‘
},
{
name: ‘tom‘,
age: 22,
gender: ‘male‘
},
{
name: ‘Hellen‘,
age: 20,
gender: ‘female‘
},
]
});
// console.log(html);
// 把html代码插入到网页中去
document.getElementById(‘container‘).innerHTML = html;
// helper
</script>
</body>
</html>时间： 2024-10-29 19:08:20