jquery实现点击编辑的表格实例

作者：袖梨 2022-11-14

可编辑的表格，指的是，在单元格上单击后，该格数据可以编辑，回车后，通过ajax保存，实现无刷新编辑。
原理：在点击单元格后，把该格内容替换成一个input标签,当用户编辑完按回车后，再通过ajax把编辑后的内容发送给服务器，把单元格内容换成编辑后的内容。

html代码:

代码如下

复制代码

歌名	歌手	排序	删除
那些年	胡夏ff	1

my.js:

代码如下

复制代码

$(function(){
$("#content td").click(function(){
//id为content的元素的td子元素被点击时执行
var musicId = $(this).parent().attr("musicId");
//读取musicId
var td = $(this);
if ((td.children("input").length > 0) || td.index() == 3) {//如果已经是input,或者是删除那一格，不执行操作
return;
}
var input = $("");
//定义一个input标签
var text = td.html();
//保存原先值
td.html("");
//清空
input.val(text).css("border", "none").width(td.width()).css("font-size", "16px").appendTo(td);
//设置默认值为原先的值，无边框，与td同宽,字体大小16px,加到td里
input.trigger("focus").trigger("select");
//获取焦点，并选中
var argName = "";
switch (td.index()) {
//index方法最出当前被点中被几列
case 0:
argName = "musicName";
break;
case 1:
argName = "singer";
break;
case 2:
argName = "sort";
}
//根据点第几列，确定参数名
input.keyup(function(event){
var keycode = event.which;
//取键值,回车为13,esc为27
if (keycode == 27) {
td.html(text);
//设回原来的值
}
if (keycode == 13) {
var newValue = $(this).val();
//取出经编辑的值
if (td.index() == 2) {
if (!isInteger(newValue)) {
alert("排序必须是整数");
$(this).val(text);
return false;
}
}
td.html(newValue);

var arg = {};
arg[argName] = newValue;
arg['musicId'] = musicId;
$.post("edit_ajax.php", arg);
//ajax发送更新指令
}
});
});
$("button.del").click(function(){
//class为del的button点击时执行
var musicId = $(this).parent().parent().attr("musicId");
$(this).parent().parent().remove();
//移除该行
var arg = {};
arg["action"] = "del";
arg['musicId'] = musicId;
$.post("edit_ajax.php", arg);
//ajax发送删除指令
});

});

function isInteger(str){
//判断是否为整数
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}