向表格中的每个单元格添加可编辑字段 (1)

📌 相关文章

📜 向表格中的每个单元格添加可编辑字段 (1)

📅 最后修改于: 2023-12-03 14:50:41.636000 🧑 作者: Mango

向表格中的每个单元格添加可编辑字段

在Web开发中，很多时候我们需要让表格中的每个单元格都可以被编辑，比如数据的录入或修改。在本文中，我们将介绍如何通过使用 JavaScript 和 HTML 技术来向表格中的每个单元格添加可编辑字段。

步骤

以下是向表格中每个单元格添加可编辑字段的步骤：

创建一个包含表头（TH）和表格行（TR）的 HTML 表格。
将每个单元格的内容包装在 DIV 元素中，并添加一个类名（class） “editable”。
使用 JavaScript 来添加一个单击事件到每个单元格，当单击时，将 DIV 元素替换为一个包含输入框（INPUT）元素的表单。
添加另一个事件监听器，在输入框中输入完成后将其值保存回单元格。
确认保存后将表格所有单元格都设置为只读模式。

## 代码示例

以下是具体实现细节的代码示例：

```html
<html>
<head>
	<style>
		table { border-collapse: collapse; }
		th, td { border: 1px solid black; padding: 5px; }
		.editable { cursor: pointer; }
	</style>
</head>
<body>

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><div class="editable">John</div></td>
			<td><div class="editable">25</div></td>
			<td><div class="editable">john@example.com</div></td>
		</tr>
		<tr>
			<td><div class="editable">Jane</div></td>
			<td><div class="editable">30</div></td>
			<td><div class="editable">jane@example.com</div></td>
		</tr>
	</tbody>
</table>

<script>
	var cells = document.querySelectorAll('.editable');

	for (var i = 0; i < cells.length; i++) {
		cells[i].addEventListener('click', function() {
			var div = this;
			var value = div.innerHTML;

			var form = document.createElement('form');
			var input = document.createElement('input');
			input.setAttribute('type', 'text');
			input.setAttribute('value', value);
			form.appendChild(input);

			div.innerHTML = '';
			div.appendChild(form);

			input.focus();

			input.addEventListener('blur', function() {
				div.innerHTML = input.value;
			});

			form.addEventListener('submit', function(event) {
				event.preventDefault();
				div.innerHTML = input.value;
				form.parentNode.removeChild(form);

				var readOnlyCells = document.querySelectorAll('.editable');
				for (var i = 0; i < readOnlyCells.length; i++) {
					readOnlyCells[i].setAttribute('contenteditable', 'false');
				}
			});
		});
	}
</script>

</body>
</html>

解释

首先，我们创建了一个包含表头和表格行的表格，其中每个单元格都包含一个可以编辑的 DIV 元素。我们使用 CSS 将表格中的边框修饰成易于区分的样式，并为所有可编辑的单元格添加指针光标。

<style>
	table { border-collapse: collapse; }
	th, td { border: 1px solid black; padding: 5px; }
	.editable { cursor: pointer; }
</style>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="editable">John</div></td>
      <td><div class="editable">25</div></td>
      <td><div class="editable">john@example.com</div></td>
    </tr>
    <tr>
      <td><div class="editable">Jane</div></td>
      <td><div class="editable">30</div></td>
      <td><div class="editable">jane@example.com</div></td>
    </tr>
  </tbody>
</table>

接下来，我们使用 JavaScript 来添加单击事件，这样当用户单击每个单元格时，就会发生相应的事件并将 DIV 元素替换为一个包含文本输入框的表单元素。我们通过元素的 innerHTML 属性来获取单元格的原始值，以便在用户取消更改时可以将单元格的值还原。

var cells = document.querySelectorAll('.editable');

for (var i = 0; i < cells.length; i++) {
	cells[i].addEventListener('click', function() {
		var div = this;
		var value = div.innerHTML;

		var form = document.createElement('form');
		var input = document.createElement('input');
		input.setAttribute('type', 'text');
		input.setAttribute('value', value);
		form.appendChild(input);

		div.innerHTML = '';
		div.appendChild(form);

		input.focus();

		input.addEventListener('blur', function() {
			div.innerHTML = input.value;
		});

		form.addEventListener('submit', function(event) {
			event.preventDefault();
			div.innerHTML = input.value;
			form.parentNode.removeChild(form);

			var readOnlyCells = document.querySelectorAll('.editable');
			for (var i = 0; i < readOnlyCells.length; i++) {
				readOnlyCells[i].setAttribute('contenteditable', 'false');
			}
		});
	});
}

最后，在表单中提交更改后，我们通过将所有单元格的 "contenteditable" 属性设置为 "false" 来禁用所有单元格的编辑。

var readOnlyCells = document.querySelectorAll('.editable');
for (var i = 0; i < readOnlyCells.length; i++) {
	readOnlyCells[i].setAttribute('contenteditable', 'false');
}

至此，我们已经成功地向表格中每个单元格添加可编辑字段。通过使用这些技术，我们可以轻松地实现各种表格编辑需求。