色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery通訊錄模板

張越彬1年前6瀏覽0評論

JQuery通訊錄模板是一種基于JQuery的前端框架,它采用了響應式設計的方式,可以在各種設備下良好地展示通訊錄信息,從而滿足了現代化信息交流和管理的需要。

在使用JQuery通訊錄模板時,我們可以通過寫一些簡單的代碼,輕松地實現數據綁定、事件綁定、搜索、篩選等功能。下面是一個簡單的JQuery通訊錄模板代碼示例:

<script>
//定義通訊錄數據
var data = [
{ name: '小明', tel: '13888888888', email: 'xiaoming@163.com' },
{ name: '小紅', tel: '13999999999', email: 'xiaohong@163.com' },
{ name: '小剛', tel: '13666666666', email: 'xiaogang@163.com' },
{ name: '小李', tel: '13555555555', email: 'xiaoli@163.com' }
];
//綁定數據
$(function () {
var html = '';
$.each(data, function (i, item) {
html += '<tr><td>' + item.name + '</td><td>' + item.tel + '</td><td>' + item.email + '</td></tr>'
});
$('#contacts tbody').html(html);
});
//搜索數據
$('#search').on('keyup', function () {
var searchVal = $(this).val();
var filterData = $.grep(data, function (item, i) {
return item.name.indexOf(searchVal) != -1 || item.tel.indexOf(searchVal) != -1 || item.email.indexOf(searchVal) != -1;
});
var html = '';
$.each(filterData, function (i, item) {
html += '<tr><td>' + item.name + '</td><td>' + item.tel + '</td><td>' + item.email + '</td></tr>'
});
$('#contacts tbody').html(html);
});
</script>
<input type="text" id="search" placeholder="搜索通訊錄"/>
<table id="contacts">
<thead>
<tr><th>姓名</th><th>電話</th><th>郵箱</th></tr>
</thead>
<tbody>
</tbody>
</table>

通過上面的代碼示例,我們實現了一個簡單的JQuery通訊錄模板,其中包含了綁定數據和搜索數據的功能,可以幫助我們更好地管理和查找通訊錄信息。