0

HTML ページにいくつかのテーブルがあり、<td>タグ内のコンテンツを jQuery UI モーダル フォームを使用して編集可能にする必要があります。つまり、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

html ファイルを javascript から変更することはできません。同じコンピューター上にあり、 file:// スキーマを使用している場合でも。データを DB に保存し、html を動的に表示する必要があります。

于 2013-10-16T14:55:17.930 に答える
0

もう 1 つの解決策は、変更されたデータを Cookie に保存し、ページの読み込み時にその内容を読み取ることです。したがって、JS 側で作成および管理する Cookie にデータを保存します。

リンク: https://developer.mozilla.org/en-US/docs/Web/API/document.cookie

ただし、これに Cookie を使用することはお勧めしません。ベスト プラクティスは、以前に皆さんが提案したように、DB にデータを格納することです。

于 2013-10-16T18:19:19.523 に答える