jquery는 즉각적인 수정을 실현합니다.
- 王林원래의
- 2023-05-23 13:43:07582검색
인터넷이 발전하면서 웹페이지의 상호작용성과 반응성이 점점 더 주목을 받고 있습니다. 인라인 편집 기능은 다양한 웹사이트에서도 널리 사용되고 있습니다. 클릭하여 변경이란 페이지의 내용을 직접 편집하는 기능을 의미합니다. 즉, 편집을 위해 새 페이지로 이동하거나 양식을 사용할 필요 없이 마우스 클릭만으로 페이지의 내용을 직접 편집할 수 있습니다. , 이는 매우 편리하고 빠릅니다.
순간적인 변화를 구현하는 과정에서 jQuery는 매우 실용적인 도구입니다. jQuery는 DOM 작업, 이벤트 처리, 애니메이션 효과 등을 쉽게 수행하는 데 도움이 되는 다양한 기능을 제공하는 빠르고 간결한 JavaScript 라이브러리입니다. 아래에서는 jQuery를 사용하여 포인트 앤 클릭 변경을 수행하는 방법을 소개합니다.
먼저 샘플 페이지를 준비해야 합니다. 각각 이름과 연령 값이 있는 여러 테이블이 있는 페이지가 있다고 가정해 보겠습니다. 사용자가 이 정보를 페이지에서 직접 편집하고 자동으로 서버에 저장할 수 있기를 바랍니다. 다음은 샘플 페이지의 HTML 소스 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>即点即改示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
th {
background-color: #eee;
}
td.editable {
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td class="editable" data-field="name" data-id="1">张三</td>
<td class="editable" data-field="age" data-id="1">25</td>
</tr>
<tr>
<td class="editable" data-field="name" data-id="2">李四</td>
<td class="editable" data-field="age" data-id="2">30</td>
</tr>
<tr>
<td class="editable" data-field="name" data-id="3">王五</td>
<td class="editable" data-field="age" data-id="3">35</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('td.editable').click(function() {
var value = $(this).text();
var field = $(this).data('field');
var id = $(this).data('id');
var input = $('<input type="text" />');
input.val(value);
$(this).empty().append(input);
input.focus();
input.blur(function() {
var new_value = $(this).val();
if (new_value != value) {
var data = {};
data[field] = new_value;
$.ajax({
method: 'POST',
url: '/update',
data: {
id: id,
data: JSON.stringify(data)
},
success: function(response) {
console.log('更新成功');
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(new_value);
},
error: function(response) {
alert('更新失败');
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
}
});
} else {
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
}
});
});
});
</script>
</body>
</html>위 HTML 소스 코드에서는 jQuery 라이브러리를 사용하고 몇 가지 스타일을 정의했습니다. 그 중 편집 가능한 각 셀은 editable类，并使用data-field和data-id属性保存了字段名称和行ID。接着，我们在页面加载完成后使用jQuery的ready函数来绑定每个可编辑单元格的点击事件。点击事件会获取当前单元格的值、字段和行ID，并创建一个input元素，将当前值赋值给input元素，并将input元素插入到当前单元格中，以便用户进行编辑。编辑完成后，input요소가 포커스를 잃게 되며 새 값을 가져와서 행 ID와 필드 이름과 함께 JSON 개체로 패키징하고 AJAX를 통해 서버에 전송하여 저장할 수 있습니다. 저장이 성공하면 원래 셀 내용이 업데이트되고, 그렇지 않으면 원래 값으로 복원됩니다.
이 시점에서 클릭 및 변경 기능을 성공적으로 구현했습니다. jQuery를 사용하여 포인트 앤 클릭 방식으로 변경하는 것은 매우 편리하며 몇 줄의 간단한 코드만 있으면 됩니다. 물론 실제 프로젝트에는 더 자세한 내용과 복잡한 비즈니스 로직이 포함되지만 위의 코드 아이디어를 통해 배우고 특정 비즈니스 요구에 따라 개선하고 최적화할 수 있습니다.
위 내용은 jquery는 즉각적인 수정을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!