前端做假修改（只更改显示数据），实际更改数据（更改数据库）后台执行。
当前代码段为前端代码展示： （推荐学习：前端视频）
HTML:
test.html
<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<script src="js/test.js"></script>
<style>
td {
border:solid 1px;
width:200px;
height:auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td οnclick="test(this)">test1</td>
<td οnclick="test(this)">test2</td>
</tr>
<tr>
<td οnclick="test(this)">test1</td>
<td οnclick="test(this)">test2</td>
</tr>
</table>
</body>
</html>JS:
test.js
var firstValue = "";
var nowDom = "";//当前操作的td
//点击更改事件
function test(doms) {
doms.removeAttribute("onclick");
nowDom = doms;
var text = doms.innerText;
doms.innerHTML = '<input type="text" value="' + text + '" id="input" οnchange="chane(this)" οnblur="inputOnblur(this)"/>';
firstValue = text;
document.getElementById("input").focus();
}
//文本框更改事件
function chane(doms) {
var text = doms.value;
if (text != firstValue) {
//提交后台更改数据库
//前端操作
nowDom.innerHTML = ""+text;
nowDom.setAttribute("onclick", "test(this)");
}
}
//文本框失焦事件
function inputOnblur(doms) {
var text = doms.value;
if (text != firstValue) {
//提交后台更改数据库
}
nowDom.innerHTML = "" + text;
nowDom.setAttribute("onclick", "test(this)");
}原理就是点击时将文本改成输入框即可！
效果演示：
点击文本后效果：
鼠标失焦或者回车保存后效果：
Atas ialah kandungan terperinci 单击列表修改其内容（前端部分）怎么做（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Adakah python bahagian hadapan atau belakang?
Cara melaksanakan pemesejan segera pada bahagian hadapan
Perbezaan antara front-end dan back-end
Pengenalan kepada hubungan antara php dan front-end
Penggunaan anotasi halaju
penyelesaian laluan fakepath
Bagaimana untuk menjalankan projek phpstudy
lightbox.js
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
