JavaScript - 保存突出显示的行

JavaScript - saving highlighted rows

提问人:shadow777 提问时间:6/14/2018 最后编辑:shadow777 更新时间:6/14/2018 访问量:56

问:

下面是突出显示 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');
        }

但是,这是行不通的。我做错了什么?

对不起,如果我的问题很明显,但我是从网络编程开始的。

JavaScript HTML

评论

0赞 mplungjan 6/14/2018
尝试 Ajax - 您需要将更改存储在服务器上,并让服务器在加载之前将类添加到行/单元格中
0赞 mplungjan 6/14/2018
@GeorgeJempty为什么不呢?只需使用类更新服务器上的表即可
0赞 vogomatix 6/14/2018
我认为应该是公正的.您需要从行中获取索引值(our_index可能)$tr.localStorage.setItem(index, 'success')localStorage.setItem(index, 'success')
0赞 shadow777 6/14/2018
是的,非常感谢!
0赞 Dexygen 6/14/2018
@mplungjan 标签中是否列出了任何服务器端技术?我不这么认为

答:

0赞 mplungjan 6/14/2018 #1

要压缩评论并尝试提出答案:

  1. 不能在客户端存储其他用户在另一台计算机上可用的任何信息。您将需要某种服务器
  2. 当您尝试协作编辑时,您需要处理并发或忽略它,因此无论谁先到达服务器,都会保存他们的版本

若要与服务器通信,可以使用 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 在加载表时完成这项工作。

评论

0赞 shadow777 6/14/2018
谢谢!我会尝试的。我还有一个问题。我正在通过保存 excel 文件重新发布页面,我想在重新发布时重置所有突出显示的数据,但我不知道如何检查页面是否已刷新。有什么想法吗?
0赞 mplungjan 6/14/2018
如何保存Excel文件?以及如何服务它?服务器进程可以读取文件日期并将其与数据一起发送。然后,您可以通过要求服务器查看文件日期来从客户端查询是否有新文件
0赞 shadow777 6/14/2018
我说的是localStorage。我在 excel 中拥有我的数据,并在 excel 中刷新数据 = 刷新页面上的数据。我想捕捉保存新数据以删除所有突出显示的单元格的时刻。
0赞 mplungjan 6/14/2018
您仍然需要查看服务器以获取文件日期。

上一个:Excel 到 html 导出

下一个:iMacros - 复选框