下面是突出显示html文件中行的脚本:
$(function(){
$('table').addClass("table table-bordered table-condensed");
$('.table').on('click', 'tr', function(e){
var $tr = $(this);
var $table = $tr.closest('.table');
var our_index = $($tr,$table).index();
if (e.shiftKey) {
var last_index = $table.data('last-index');
if (last_index) {
if (last_index < our_index) {
while(last_index < our_index) {
$('tbody tr:eq('+(++last_index)+')', $table).click();
}
$('tbody tr:eq('+(last_index)+')', $table).click();
} else {
while(last_index > our_index) {
$('tbody tr:eq('+(--last_index)+')', $table).click();
}
$('tbody tr:eq('+(last_index)+')', $table).click();
}
}
$table.data('last-index',our_index);
} else {
$table.data('last-index',our_index);
}
if ($tr.hasClass('success')) {
$tr.removeClass('success');
} else {
$tr.addClass('success');
}
});
});
我现在想要保存那些突出显示的行,以便当其他人打开页面时,将显示由be突出显示的行,如果我将突出显示某些单元格然后刷新页面,则会保持突出显示。
有没有简单的方法来实现这一目标?
提前致谢。
- - - - - - - - 编辑
我试图通过localStorage来做到这一点:
$('tr').each(function(index){
if(localStorage.getItem(index)!=null){
$(this).addClass(localStorage.getItem(index));
}
});
并保存部分:
if ($tr.hasClass('success')) {
$tr.removeClass('success');
} else {
$tr.addClass('success');
$tr.localStorage.setItem(index, 'success');
}
但是,这不起作用。我做错了什么?
很抱歉,如果我的问题很明显,但我开始使用网络编程。
答案 0 :(得分:0)
要简化评论并尝试提出答案:
要与服务器通信,您可以使用Ajax。注意此代码未经过测试:
var rows = [], saveRows = [];
function saveState() {
$('tbody tr').each() {
if ($(this).is(".success")) rows.push($(this).index())
}
if (rows.join(",") != saveRows.join(",")) {
saveRows = rows.slice(0); // copy;
$.post("storeRows.php",{"rows":rows.length>0?rows.join(","):""},function(res) {
console.log("stored");
if (res.rows.join(",") != saveRows.join(",")) {
$('tbody tr').each(function(i) {
$(this).toggleclass("success",rows.indexOf(i));
});
}
});
}
}
setInterval(saveState,3000);
服务器需要将列表保存在某处
1,4,7,9
然后在创建表时使用它来初始化表,或者在加载表时让ajax完成工作。