0

我在 HTML 页面上有几个表格，我需要使用 jQuery UI 模态表单使<td>标签内的内容可编辑，这意味着使用 jQuery UI 模态表单应该能够永久编辑内容。

例如：

HTML：

<table>
  <tr>
    <td id="name">John Doe</td>
    <td id="number">999 999 9999</td>
  </tr>
</table>

<button id="edit">Edit</button>

模态形式：

<div id="edit-form" title="Edit Info">
  <form>
    <fieldset>
      <legend>Contact Info</legend>
      <table>
        <tr>
          <td>Name</td>
          <td><input type="text" name="cName" id="cName" /></td>
        </tr>
        <tr>
          <td>Number</td>
          <td><input type="text" name="cNumber" id="cNumber" /></td>
        </tr>
      </table>
    </fieldset>
  </form>
</div>

Javascript/jQuery

<script type="text/javascript">

$(function () {
    var name = $("#cName"),
        number = $("#cNumber");

    $("#edit")
        .button()
        .click(function () {
            $("#edit-form").dialog("open");

    $("#edit-form").dialog({
        autoOpen: false,
        height: 'auto',
        width: 'auto',
        modal: true,
        buttons: {
            "Apply": function () {
                document.getElementById('name').innerHTML = name.val();
                document.getElementById('number').innerHTML = number.val();
                $(this).dialog("close");
            },
            Cancel: function () { $(this).dialog("close"); }
        }
    });
});

</script>

但是，这只是临时更改 HTML 文本。如果我重新加载页面，旧文本又回来了。

如何实现这一点，以便新文本替换旧文本（即写入文件）？任何帮助表示赞赏！

4

2 回答 2

2

您不能从 javascript 更改 html 文件。即使它在同一台计算机上并且您使用 file:// 模式也不会。您需要将数据存储在数据库中，并动态显示 html。

于 2013-10-16T14:55:17.930 回答
0

另一种解决方案是将修改后的数据存储到 cookie 中，并在加载页面时读取其内容。因此，您将数据存储在由您在 JS 端创建和管理的 cookie 中。

链接：https ://developer.mozilla.org/en-US/docs/Web/API/document.cookie

但是，不建议为此使用 cookie。最佳做法是将数据存储在数据库中，就像每个人之前建议的那样。

于 2013-10-16T18:19:19.523 回答