JavaScript를 사용하여 표 형식 데이터의 온라인 편집 구현
- WBOY원래의
- 2023-06-15 20:53:042316검색
최신 웹 애플리케이션에서 테이블은 데이터를 표시하고 편집하는 데 사용되는 일반적인 UI 구성 요소입니다. 어떤 경우에는 사용자가 다른 페이지로 이동하거나 외부 도구를 사용하여 수정하지 않고도 데이터를 빠르게 수정하기 위해 테이블에서 직접 편집해야 할 수도 있습니다. 따라서 온라인 테이블 편집 기능을 구현하는 것이 매우 유용합니다. 이 기사에서는 JavaScript와 일부 오픈 소스 라이브러리를 사용하여 표 형식 데이터의 온라인 편집을 구현하는 방법을 소개합니다.
1. HTML 테이블 생성
JavaScript를 사용하기 전에 먼저 HTML 테이블을 생성해 주세요. 다음은 간단한 예입니다.
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>1.99</td>
<td>100</td>
</tr>
<tr>
<td>橙子</td>
<td>0.99</td>
<td>50</td>
</tr>
</tbody>
</table>2. 편집 버튼 및 이벤트 핸들러 추가
테이블의 편집 가능한 각 셀에 "편집" 버튼을 추가하고 버튼을 클릭하면 편집 모드를 시작합니다. 방법은 다음과 같습니다.
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="editable-cell">
<span class="value">苹果</span>
<input type="text" class="editor" value="苹果">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">1.99</span>
<input type="text" class="editor" value="1.99">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">100</span>
<input type="number" class="editor" value="100">
<button class="edit-btn">编辑</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="editable-cell">
<span class="value">橙子</span>
<input type="text" class="editor" value="橙子">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">0.99</span>
<input type="text" class="editor" value="0.99">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">50</span>
<input type="number" class="editor" value="50">
<button class="edit-btn">编辑</button>
</div>
</td>
</tr>
</tbody>
</table>다음 예에서는 jQuery 라이브러리를 사용하여 DOM 요소를 찾고 조작합니다.
$(document).ready(function() {
// 查找所有编辑按钮和可编辑单元格
var editBtns = $('.edit-btn');
var cells = $('.editable-cell');
// 添加事件处理程序
editBtns.click(function() {
var cell = $(this).closest('.editable-cell');
var valueSpan = cell.find('.value');
var editor = cell.find('.editor');
// 切换编辑模式
valueSpan.hide();
editor.show().focus();
// 提交修改
editor.blur(function() {
valueSpan.text(editor.val());
editor.hide();
valueSpan.show();
});
});
});이 코드는 먼저 모든 "편집" 버튼과 편집 가능한 셀을 찾은 다음 DOM 요소에서 단일 작업을 시작합니다. 버튼 클릭 핸들러. 핸들러에서는 필요한 요소(값의 텍스트 노드, 편집기 및 셀)를 찾고 편집 모드를 전환하며 편집기에 포커스를 설정합니다. 사용자가 편집을 마치고 편집기가 포커스를 잃으면 처리기는 수정 사항을 커밋하고 텍스트 노드에 업데이트된 값을 표시합니다.
3. 저장 및 취소 버튼 추가
편집 모드에서 사용자는 변경 사항을 저장하거나 취소할 수 있는 방법이 필요합니다. 이를 달성하기 위해 두 개의 버튼을 추가할 수 있습니다:
<button class="save-btn">保存</button> <button class="cancel-btn">取消</button>
이러한 버튼은 편집 가능한 각 셀의 편집 모드에 포함되어야 사용자가 필요한 경우 개별 셀에 대한 수정 사항을 저장하거나 취소할 수 있습니다. 방법은 다음과 같습니다.
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="editable-cell">
<span class="value">苹果</span>
<input type="text" class="editor" value="苹果">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">1.99</span>
<input type="text" class="editor" value="1.99">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">100</span>
<input type="number" class="editor" value="100">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="editable-cell">
<span class="value">橙子</span>
<input type="text" class="editor" value="橙子">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">0.99</span>
<input type="text" class="editor" value="0.99">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">50</span>
<input type="number" class="editor" value="50">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
</tr>
</tbody>
</table>편집 버튼과 유사하게 두 버튼 모두에 대한 클릭 이벤트를 처리하고 양식 데이터를 서버에 제출하려면 이벤트 핸들러를 추가해야 합니다. 방법은 다음과 같습니다.
$(document).ready(function() {
// 查找所有编辑按钮、保存按钮和取消按钮
var editBtns = $('.edit-btn');
var saveBtns = $('.save-btn');
var cancelBtns = $('.cancel-btn');
// 添加事件处理程序
editBtns.click(function() {
var cell = $(this).closest('.editable-cell');
var valueSpan = cell.find('.value');
var editor = cell.find('.editor');
var saveBtn = cell.find('.save-btn');
var cancelBtn = cell.find('.cancel-btn');
// 切换编辑模式
valueSpan.hide();
editor.show().focus();
saveBtn.show();
cancelBtn.show();
// 提交修改
saveBtn.click(function() {
valueSpan.text(editor.val());
editor.hide();
valueSpan.show();
saveBtn.hide();
cancelBtn.hide();
// 向服务器提交表格数据
var rowData = {
name: cell.closest('tr').find('td').eq(0).text(),
price: cell.closest('tr').find('td').eq(1).text(),
stock: cell.closest('tr').find('td').eq(2).text()
};
$.ajax({
url: '/api/updateRow',
method: 'POST',
data: rowData,
success: function(response) {
console.log('行更新成功');
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
// 取消修改
cancelBtn.click(function() {
editor.val(valueSpan.text());
editor.hide();
valueSpan.show();
saveBtn.hide();
cancelBtn.hide();
});
});
});이 코드는 먼저 모든 편집, 저장 및 취소 버튼을 찾고 각 편집 버튼의 클릭 핸들러에 이벤트 리스너를 추가합니다. 핸들러에서는 필요한 요소(값의 텍스트 노드, 편집기, 저장 버튼 및 취소 버튼)를 찾고 편집 모드를 표시하며 편집기에 포커스를 설정합니다. 사용자가 저장 버튼을 클릭하면 핸들러는 수정 사항을 커밋하고 업데이트된 값을 텍스트 노드에 표시하며 서버에 업데이트 요청을 보냅니다. 사용자가 취소 버튼을 클릭하면 핸들러는 수정 사항을 취소하고 초기 값을 복원합니다.
4. 결론
이 기사에서는 JavaScript와 일부 오픈 소스 라이브러리를 사용하여 표 형식 데이터의 온라인 편집을 구현하는 방법을 배웠습니다. 사용자가 테이블의 데이터를 쉽게 수정하고 jQuery 및 Ajax를 사용하여 서버에 업데이트를 제출할 수 있도록 편집 버튼과 저장/취소 버튼을 추가했습니다. 이는 JavaScript를 보여주고 해당 라이브러리를 사용하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있는 방법을 보여주는 훌륭한 예입니다.
위 내용은 JavaScript를 사용하여 표 형식 데이터의 온라인 편집 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!