JavaScript 无法正常运行？ (忽略我当前的 html 值)

Question

我有一些 Javascript，可以让我将行添加到当前现有的 HTML 表中，并保存更改。但是，默认情况下，当我进入该页面时，该表不存在。但是，当我在脚本的某个阶段放置断点时，原始表会出现，但随后默认返回到 Hello 并且只是不添加新行。

有人知道我错在哪里吗？

JQuery 导入

<script src="js/jquery-2.1.0-beta2.js" type="text/javascript"></script>

HTML

<div>
    <table class="table table-striped" id="ConTable">
        <thead>
            <tr>
                <th>#</th>
                <th>IRC Name</th>
                <th>Ingame Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>[Cr|m|nAl]</td>
                <td>
                    <div class='clEdit'>
                        Herbalist
                    </div>
                </td>
                <td>Aeterna Top</td>
            </tr>
            <tr>
                <td >2</td>
                <td >bandido</td>
                <td>
                    <div class='clEdit'>
                        Bananni
                    </div>
                </td>
                <td >Aeterna Top</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Funkystyle</td>
                <td>
                    <div class='clEdit'>
                        Funkystyle
                    </div>
                </td>
                <td>Aeterna Top</td>
            </tr>
        </tbody>
    </table>
</div>


<div class="single-one">
    <button id="del" class="btn btn-danger">Delete Rows</button>
</div>
<div class="single-one">
    <button id="add" class="btn btn-primary">Add Rows</button>
</div>
<div class="single-one">
    <button id="save" class="btn btn-success">Save Changes</button>
</div>
<div id="divCon">
    &nbsp;
</div>

Javascript

$(".clEdit").prop('contenteditable', true);
//Try with hover replace click with hover
$(".clEdit").hover(function (e) {
    $(this).prop("title", $(this).html());
});

var idFirstCol;
//var idFirstCol = 3;
if (localStorage.getItem('rowID'))
{ // apply the newContent when it is exist ini localStorage
    idFirstCol = localStorage.getItem('rowID');
}
else
{
    idFirstCol = 3; //As of now hardcoded to 3 for first load since HTML content has 3 rows
}

$("#add").click(function () {
    //LOGIC TO ADD ROW TO TABLE
    var trRow = "<tr><td>"
            + ++idFirstCol
            + "</td><td><div class='clEdit'>"
            + "SecondColValue"
            + "</div><td><div class='clEdit'>"
            + "ThirdColValue"
            + "</div></td><td><div class='clEdit'> "
            + "LastColValue"
            + "</div></td></tr>";


    $("#ConTable").append(trRow);
    $(".clEdit").hover(function (e) {
        $(this).prop("title", $(this).html());
    });

    $(".clEdit").prop('contenteditable', true);
});

var theContent = $('#ConTable');// set the content
$('#save').on('click', function () { // store the new content in localStorage when the button is clicked
    var editedContent = theContent.html();
    alert(editedContent);
    localStorage.newContent = editedContent;
    localStorage.rowID = idFirstCol;
});

if (localStorage.getItem('newContent'))
{ // apply the newContent when it is exist ini localStorage
    theContent.html(localStorage.getItem('newContent'));
}

CSS

.editable{ 
    background:#EAEAEA
}

.clEdit {
    width : 250px; /*Try chaging it as per need*/
    overflow : hidden; /*  try scroll with more height  */
    height : 25px;/*Try chaging it as per need*/
}

这适用于 JSFiddle，但不适用于我的计算机，所以我不完全确定出了什么问题(我从我的 Angular 假设它。运行它时，Javascript 中没有出现错误。我也尝试过这在一个空网站中，但是它仍然没有执行 javascript 应该执行的操作。(但是表格确实出现了)

有谁知道我哪里出错了？我可以提供屏幕截图来帮助我寻找解决方案。

https://jsfiddle.net/5g2xmsfp/ - 展示应该发生什么。

链接问题:contenteditable - JQuery save content just to webpage (as well as adding and removing)

Answer 1

您需要考虑 localStorage 的行为。当用户添加行并保存时。它保存在特定于浏览器的本地计算机上。

假设用户 A 访问网站并默认看到 3 行。用户将编辑一些内容并添加新行并保存。

如果用户B访问网站页面，则第一次访问时默认会看到3行。

现在，如果用户 A 从同一浏览器第二次访问网站，用户将看到编辑和添加的行。但是，如果用户从与以前不同的浏览器访问它，它会再次显示仅包含 3 行的默认页面。

我认为这就是您的情况。如果您希望保存整个表，您应该按值将其保存在服务器上，并在显示时从服务器读取它并将其显示在表中。无论浏览器如何，它对于所有用户都是一致的。

同时等待其他用户的指导。