下面我将详细讲解如何使用JavaScript实现表格编辑器：
1. 准备工作
在实现表格编辑器之前，我们需要在HTML中添加一个空表格，具体代码如下所示：
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
2. 添加JavaScript代码
接下来，我们需要在JavaScript中添加一些代码，来实现表格的编辑功能。首先，我们需要添加以下代码，来获取表格元素和表格行数：
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
接着，我们需要为表格添加一个空行，代码如下：
var newRow = table.insertRow(rowCount);
然后，我们需要往新行中添加单元格，并添加相关的HTML代码和样式：
newRow.innerHTML = '<td><input type="text" name="name"></td>' + '<td><input type="text" name="age"></td>' + '<td><select name="gender"><option value="male">男</option><option value="female">女</option></select></td>' + '<td><input type="button" value="编辑" onclick="editRow(this)">' + '<input type="button" value="保存" onclick="saveRow(this)">' + '<input type="button" value="删除" onclick="deleteRow(this)"></td>';
newRow.className = 'editableRow';
其中，editRow()、saveRow()、deleteRow()是用来编辑、保存和删除表格行的函数。
3. 编辑、保存和删除表格行
下面，我们来详细讲解如何实现编辑、保存和删除表格行的功能。
3.1 编辑表格行
编辑表格行需要我们在点击编辑按钮时，将当前行的单元格中的数据保存到input中，并将该单元格变为可编辑状态。编辑完成后，我们需要点击“保存”按钮将数据保存到表格中，并将该单元格变为不可编辑状态。
函数代码如下：
function editRow(row) {
var currentRow = row.parentNode.parentNode;
var cells = currentRow.getElementsByTagName('td');
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var cellValue = cell.innerText || cell.textContent;
cell.innerHTML = '<input type="text" value="' + cellValue + '">';
}
row.style.display = 'none';
currentRow.getElementsByClassName('saveBtn')[0].style.display = 'inline-block';
}
编辑操作的核心在于将单元格中的数据保存到input中，并将该单元格变为可编辑状态。innerText和textContent兼容不同浏览器的文本内容获取方法。
3.2 保存表格行
保存表格行需要我们在点击“保存”按钮时，获取该行单元格中input的值，然后将该值赋值给单元格，同时将该单元格变为不可编辑状态。
函数代码如下：
function saveRow(row) {
var currentRow = row.parentNode.parentNode;
var cells = currentRow.getElementsByTagName('td');
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var cellInput = cell.getElementsByTagName('input')[0];
cell.innerHTML = cellInput.value;
}
row.style.display = 'none';
currentRow.getElementsByClassName('editBtn')[0].style.display = 'inline-block';
}
保存操作的核心在于获取单元格中input的值，并将值赋值给单元格，同时将该单元格变为不可编辑状态。
3.3 删除表格行
删除表格行需要我们在点击“删除”按钮时，删除当前行。
函数代码如下：
function deleteRow(row) {
var currentRow = row.parentNode.parentNode;
currentRow.parentNode.removeChild(currentRow);
}
4. 示例展示
下面给出两个示例，分别为添加新行和编辑保存表格行：
4.1 添加新行
在点击“添加行”按钮时，将会在表格的最后一行添加一行空数据。
示例代码如下：
function addRow() {
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
var newRow = table.insertRow(rowCount);
newRow.innerHTML = '<td><input type="text" name="name"></td>' + '<td><input type="text" name="age"></td>' + '<td><select name="gender"><option value="male">男</option><option value="female">女</option></select></td>' + '<td><input type="button" value="编辑" onclick="editRow(this)">' + '<input type="button" value="保存" onclick="saveRow(this)">' + '<input type="button" value="删除" onclick="deleteRow(this)"></td>';
newRow.className = 'editableRow';
}
4.2 编辑保存表格行
在点击“编辑”按钮时，将会将该行数据变为可编辑状态，同时将“编辑”按钮变为“保存”按钮。在点击“保存”按钮时，将会将该行数据保存到表格中。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格编辑器</title>
<style>
table, th, td {
border: 1px solid #333;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
.editableRow td input[type='text'], .editableRow td select {
width: 80%;
}
.editableRow input[type='button'] {
display: none;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="editableRow">
<td><input type="text" value="张三"></td>
<td><input type="text" value="18"></td>
<td>
<select>
<option value="male">男</option>
<option value="female">女</option>
</select>
</td>
<td>
<input type="button" value="编辑" onclick="editRow(this)" class="editBtn">
<input type="button" value="保存" onclick="saveRow(this)" class="saveBtn">
<input type="button" value="删除" onclick="deleteRow(this)">
</td>
</tr>
<tr class="editableRow">
<td><input type="text" value="李四"></td>
<td><input type="text" value="20"></td>
<td>
<select>
<option value="male">男</option>
<option value="female">女</option>
</select>
</td>
<td>
<input type="button" value="编辑" onclick="editRow(this)" class="editBtn">
<input type="button" value="保存" onclick="saveRow(this)" class="saveBtn">
<input type="button" value="删除" onclick="deleteRow(this)">
</td>
</tr>
</tbody>
</table>
<input type="button" value="添加行" onclick="addRow()">
<script>
function editRow(row) {
var currentRow = row.parentNode.parentNode;
var cells = currentRow.getElementsByTagName('td');
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var cellValue = cell.innerText || cell.textContent;
cell.innerHTML = '<input type="text" value="' + cellValue + '">';
}
row.style.display = 'none';
currentRow.getElementsByClassName('saveBtn')[0].style.display = 'inline-block';
}
function saveRow(row) {
var currentRow = row.parentNode.parentNode;
var cells = currentRow.getElementsByTagName('td');
for (var i = 0; i < cells.length - 1; i++) {
var cell = cells[i];
var cellInput = cell.getElementsByTagName('input')[0];
cell.innerHTML = cellInput.value;
}
row.style.display = 'none';
currentRow.getElementsByClassName('editBtn')[0].style.display = 'inline-block';
}
function deleteRow(row) {
var currentRow = row.parentNode.parentNode;
currentRow.parentNode.removeChild(currentRow);
}
function addRow() {
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
var newRow = table.insertRow(rowCount);
newRow.innerHTML = '<td><input type="text" name="name"></td>' + '<td><input type="text" name="age"></td>' + '<td><select name="gender"><option value="male">男</option><option value="female">女</option></select></td>' + '<td><input type="button" value="编辑" onclick="editRow(this)">' + '<input type="button" value="保存" onclick="saveRow(this)">' + '<input type="button" value="删除" onclick="deleteRow(this)"></td>';
newRow.className = 'editableRow';
}
</script>
</body>
</html>
以上就是使用JavaScript实现表格编辑器的完整攻略，希望能对你有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JavaScript实现表格编辑器(实例讲解) - Python技术站
微信扫一扫 
支付宝扫一扫 