2

編集可能なテーブルをレンダリングしようとしていますが、次のアプローチを評価しています:

  • ラベルとしてのデータと編集コマンドを使用して、バックエンドから HTML テーブルを準備します
  • データの入力と保存コマンド<TR>を使用して、非表示の DIV に空の行 (a ) を準備します

  • 編集のクリックでjQueryを使用すると、現在の行を非表示にし、DIVから利用可能な塗りつぶされた行を追加します.html()

    更新:このアプローチを表すjsFiddleを追加しました

さて、私の質問は、このアプローチに短所はありますか? より良いアプローチはありますか？

私はいくつかのことを心配しています：

  • a の<TR>中の a<DIV>は XHTML で有効ではありません。多分私はいくつかのクロスブラウザの問題に対応できますか?
  • <TR>Web 開発者がJS スクリプトを介して要素を編集したり、引用符のエスケープを回避したり、保守性を高めたりすることは望ましくありません
4

2 に答える 2

2

このアプローチを検討する必要があると思います。

JSフィドル

var firstTd = $("td:eq(0)", myTr);
firstTd.html('<input type="text" name="field1" value="' + firstTd.html() + '"/>');
于 2013-08-30T10:18:29.890 に答える
2

contenteditable属性を考慮しましたか？これがどのように機能するかを示すために、私はあなたのフィドルをフォークしました:

編集ボタンがクリックされると、contenteditable属性は含まれる行に与えられます。保存ボタンをクリックすると削除されます。CSS は、属性に基づいて適切なボタンを表示および非表示にするために使用されます (古い IE をサポートする場合は、スクリプトを変更してクラスを追加する必要がある場合があります — IE6 は属性セレクターを読み取ることができません)。

私が見たところ、これはコード的にははるかに冗長ではなく、ユーザーにとってエクスペリエンスがより明確になります。

于 2013-08-30T10:59:39.447 に答える