Question

我想在javascript和jQuery中动态添加表格行。

对此的一个解决方案是：

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

（见：SO: Add table row in jQuery）

此解决方案有一个很大的缺点：浏览器刷新（F5，Ctr-r键或浏览器选项卡中的刷新按钮）无法生存。

是否有解决方案使添加的表行（以及用户在输入字段中添加的数据）与浏览器刷新无关？

备注：禁用F5按钮和类似的东西不是另一种选择。

Answer 1

我认为你可以使用

localStorage.setItem('variableName', value)

然后用

获取它

localStorage.getItem('variableName').

希望这有帮助。

Answer 2

你可以使用cookies，一个例子就是这样：
设置表格行时

document.cookie("Row=" + row); //row is your table row variable

刷新/页面加载（F5）

function getRow() {
var name = "Row"+ "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') {
        c = c.substring(1);
     }
     if (c.indexOf(name) == 0) {
        return c.substring(name.length,c.length);
     }
 }
return "";

}

Answer 3

当您使用Javascript操作DOM对象时，您正在客户端浏览器的内存中执行此操作。点击F5将重新加载页面并释放该内存中的每个更改。

要使您的更改在F5中存活，您必须将它们存储在客户端内存以外的其他位置。为此，您有多种选择。最佳选择取决于您的应用程序设计和需求。

数据库：非常有用，尤其是当您操作的数据需要在不同用户之间共享时。如果您的应用程序具有用户系统并且您的更改在用户之间共享，则需要将这些更改存储在集中式环境中（例如服务器上的数据库），以便每个用户都可以访问并查看这些更改。
Cookie和localStorage：如果应用程序旨在用作黑盒子（每个用户只能看到自己的数据），您可以在本地使用cookie或存储。如果您希望保留集中副本，则在会话结束时，您也可以将所有本地数据发送到服务器数据库。

在javascript中添加表格行，使其在F5按键

3 个答案: