JavaScript - 保存突出显示的行

时间:2018-06-14 09:51:52

标签: javascript html

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

但是,这不起作用。我做错了什么?

很抱歉,如果我的问题很明显,但我开始使用网络编程。

1 个答案:

答案 0 :(得分:0)

要简化评论并尝试提出答案:

  1. 您不能在客户端存储其他计算机上其他用户可用的任何信息。你需要某种服务器
  2. 当您尝试协作编辑时,您需要处理并发或忽略它,因此无论谁先到达服务器,都要保存其版本
  3. 要与服务器通信,您可以使用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完成工作。