Javascript运行不正常？（忽略我当前的html值）

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

Hello

，并且不会添加新行

有人知道我哪里出错了吗

JQuery导入

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

$(".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'));
}

这在JSFIDLE上有效，但在我的计算机上不起作用，因此我不完全确定出了什么问题（从我的角度来看，我假设这是错误的。在运行Javascript时，Javascript中没有出现错误。我也尝试在一个空的网站上尝试过这一点，但它仍然没有做Javascript应该做的事情。（不过，该表确实出现了）

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

-展示应该发生什么

---

链接问题：

你需要考虑本地存储的行为。当用户添加行并保存它时，它会保存在特定于浏览器的本地机器上。

假设用户

A

访问网站时，默认情况下会看到3行。用户将编辑少量内容，添加新行并保存

如果用户

B

访问网站页面，如果用户第一次访问该页面，默认情况下将看到3行

现在，如果用户A从同一个浏览器第二次访问网站，用户将看到编辑和添加的行。但如果用户从不同的浏览器再次访问网站，它将显示只有3行的默认页面

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

---

也要等待其他用户对此进行指导。

如果没有抛出错误，则很可能您没有在

$（文档）中包装代码。ready

哪个fiddle按默认值执行类似操作？不幸的是，添加$（文档）不会执行任何操作.ready@BrianElliott你说它不工作是什么意思？你是如何测试它的？你真的应该养成缩进代码并使其整洁的习惯。这使阅读/故障排除变得容易得多。它在你的计算机上起什么作用？此外，你已经将html/脚本片段分开，将它们放在一起总是很有用的。jQuery取决于正在按特定顺序加载脚本，这可能是因为实际页面上的脚本顺序不正确，我想通过C#尝试一下，使用ASP表在服务器上运行它，并将信息保存在文本文件中，然后在其他地方加载页面时，它将使用HTML读取文本文件。可选，以及我可能更自信使用的路径。您的回答间接地解决了我的问题，找到了不同的路径。谢谢。文本文件将rk也在服务器上。如果可以，请尝试在服务器上使用本地数据库。

$(".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'));
}

.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*/
}