可编辑的表格，指的是，在单元格上单击后，该格数据可以编辑，回车后，通过ajax保存，实现无刷新编辑。
原理：在点击单元格后，把该格内容替换成一个input标签,当用户编辑完按回车后，再通过ajax把编辑后的内容发送给服务器，把单元格内容换成编辑后的内容。
html代码:
| 代码如下 | 复制代码 |
|
<table width="622" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="129">歌名</td> <td width="127">歌手</td> <td width="152">排序</td> <td width="165">删除</td> </tr> <tr id="content" musicId="2"> <td>那些年</td> <td>胡夏ff</td> <td>1</td> <td><button class="del">删除</button></td> </tr> </table> |
|
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 type='text'>"); //定义一个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); } |
|
edit_ajax.php
这个ajax文件就是一个php接受ajax提交过来的数据了，这个与其它php提交数据一样的就不介绍了。
时间： 2024-12-31 23:17:33