HTML テーブルセルを編集可能にするにはどうすればいいですか? 質問する

HTML テーブルセルを編集可能にするにはどうすればいいですか? 質問する

HTML テーブルのセルの一部を編集可能にし、セルをダブルクリックしてテキストを入力するだけで、変更内容をサーバーに送信できるようにしたいと考えています。dojo データ グリッドなどのツールキットは使いたくありません。他の機能も提供しているからです。コード スニペットや実装方法に関するアドバイスをいただけませんか?

ベストアンサー1

問題のセル、行、またはテーブルで contenteditable 属性を使用できます。

IE8 互換性のために更新されました

<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>

ただし、少なくとも Mozilla では、テーブルを編集可能にすると、行などを削除できることに注意してください。

また、対象ユーザーのブラウザがこの属性をサポートしているかどうかも確認する必要があります。

変更をリッスンしてサーバーに送信できるようにするには、コンテンツ編集可能な変更イベント

おすすめ記事