页面搜索,页面搜索快捷键是什么

页面搜索,页面搜索快捷键是什么

页面搜索,页面搜索快捷键是什么,前端页面搜索功能实现

 这里页面显示,显示所有的数据,进入这个页面的时候就显示。这里可以改为使用js加载显示数据的

tbody id="tbody" c:forEach items="${list}" var="v" td ${v.title} /td fmt:formatDate value="${v.start}" pattern="HH:mm:ss" /fmt:formatDate fmt:formatDate value="${v.end}" pattern="HH:mm:ss" /fmt:formatDate /td /tr /c:forEach /tbody

 

 script type="text/javascript" id="searchText" 
//这里的userTimes的数据是和初始化加载显示的页面数据一样的, 就是上边的 ${list} jstl 认识对象集合
//js不认识 所以这里在后台把list转化为了jsonObject JSONObject.toJSON(userTimes)
var list = ${userTimes}; 

function query(name) {
var html = "";
list.forEach(function (v, index, arr) {
/*选择了老师后的搜索*/
if(name == v.title){
html += " tr " +
" td " + v.title + " /td " +
" td " +
format(v.start) +
" -" +
format(v.end) +
" /td " +
" /tr
}

/*初始化的时候的数据*/
if(name == '0'){
html += " tr " +
" td " + v.title + " /td " +
" td " +
format(v.start) +
" -" +
format(v.end) +
" /td " +
" /tr
}

console.log(html)
$("#tbody").html(html);
//搜索显示数据后,如果老师名称一样,还是使用下边的合并单元格方法
uniteTable("tb",1);
})
}

function format(myDate) {
if(myDate != null){
//有值,不是空2019-01-01 10:00:00
return new Date(myDate).format("hh:mm:ss");
}
return myDate;
}

/**
* 格式化时间的,网上复制的
* @param fmt yyyy-MM-dd hh:mm:ss 格式就是下边的,小时一般大写,这里小写。
* @returns {*}
* 如果是unix时间,那么 new Date(unixTime).format("hh:mm:ss") ==== 12:00:00
*/
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}


//合并挨着的表格的数据,
//老师名字一样就合并了后台只需要按照老师名称排序就行,把来时名称一样的放到一块
function uniteTable(tableId,colLength) {
//colLength-- 需要合并单元格的列1开始
var tb=document.getElementById(tableId);

tb.style.display='';

var i = 0;
var j = 0;

var rowCount = tb.rows.length; // 行数
var colCount = tb.rows[0].cells.length; // 列数

var obj1 = null;
var obj2 = null;
var obj3 = null;

//为每个单元格命名
for (i = 0; i rowCount; i++) {
for (j = 0; j colCount; j++) {
tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
}
}


//合并行 (列循环)第一行第一列均从0开始
for (i = 0; i colCount; i++) {

//如果第3,4,5列不进行合并操作
if (i == 2 || i == 3 || i == 4) continue;
obj1 = document.getElementById("tb__0_" + i.toString())
//(行循环)
for (j = 1; j rowCount; j++) {
obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());

if(i == 0){ //第1列全部进行合并操作
if (obj1.innerText == obj2.innerText) { //判断值是否相等
obj1.rowSpan++; //合并行
obj2.parentNode.removeChild(obj2); //移除被合并的行
} else {
obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
}
}else if(i == 5){ //第6列合并操作参照第2列,第二列合并了,第5列才进行合并
obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-4).toString());
if (obj1.innerText == obj2.innerText obj3 == null) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
} else {
obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
}
}else{ //只有前一列进行了合并操作后面的才会进行合并操作
obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-1).toString());
if (obj1.innerText == obj2.innerText obj3 == null) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
} else {
obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
}
}
}
}
}

/script