JavaScript と HTML5 の contenteditable プロパティを使用できる、編集可能な HTML テーブルが実装されています。
<!DOCTYPE html>
<html>
<頭>
<スタイル>
テーブル {
境界崩壊: 崩壊;
幅: 100%;
}
th、td {
境界線: 1 ピクセルの黒一色。
パディング: 8px;
テキスト整列: 左;
}
</スタイル>
</head>
<本文>
<table id="editableTable">
<頭>
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
</tr>
</thead>
<本体>
<tr>
<td contenteditable="true">ジョン ドゥ</td>
<td contenteditable="true">25</td>
<td contenteditable="true">男性</td>
</tr>
<tr>
<td contenteditable="true">ジェーン スミス</td>
<td contenteditable="true">30</td>
<td contenteditable="true">女性</td>
</tr>
<!-- 追加さらに複数行 -->
</tbody>
</テーブル>
<スクリプト>
// 获取可编辑表格
var table = document.getElementById('editableTable');
// 遍历表格，每个单元格追加イベント侦听器
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].addEventListener('input', function () {
// 入力イベントを処理します。ここで実行処理またはデータを保存できます。
console.log(this.textContent);
});
}
}
</script>
</body>
</html>前述の例では、contenteditable プロパティを使用して、テーブルのエレメントをマウスポイントで入力してユーザー入力を受け付けられるようにしています。
JavaScript はテーブルのすべての要素を部分的に実行し、各要素に入力イベント プロセッサを追加します。たとえば、データの更新や他のオペレーションの実行など、必要に応じてユーザーの入力を処理できます。
点击表格前：
点击表格後：
ここまでのこの節は、html table+css の実現可能テーブルの例コードの文章に関するもので、さらに関連する html 可能テーブルの例を示します。内容萜索downcodes.com以前の文章または継続赏次の関連文章，希望大家以後多数支持downcodes.com！