Ajax实现可编辑的表格(实例)

最新推荐文章于 2021-08-06 16:08:52 发布

QQ89697761

最新推荐文章于 2021-08-06 16:08:52 发布

阅读量761

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： ajax input stylesheet function table jquery

本文链接：https://blog.youkuaiyun.com/QQ89697761/article/details/6363605

Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种交互式表格实现方式，通过CSS样式美化界面，利用JS监听事件，实现在表格单元格上点击即可修改内容的功能，并且内容修改后会立即更新到表格中，确保数据实时同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先还是引用css样式，和js代码

然后就是body里边的内容

<body>  <table border="1px"> <tr> <td>shoubei</td> <td>shouxin</td> </tr> </table> </body>

css样式代码

/*table和td都有这样的属性*/ table,td{ border-collapse: collapse; /*相邻的边框都合并*/ border: 1px solid red; }

js代码

//在页面装载是让页面中的所有td都有一个点击事件 $(document).ready(function(){ //找到所有的td节点 var tds = $("td"); //给所有的td节点加上点击事件 tds.click(tdclick) }) //td被点击事件 function tdclick() { //0，保存当前td节点 var td = $(this); //1，取出当前td文本内容，保存起来 var text = $(this).text(); //2，td文本内容全部清空 td.html(""); //也可以用 td.empty(); //3，建立一个文本框的标签,也就是一个input节点 var input = $("<input>") //4，设置文本框里边的值，是原来保存起来的值 input.attr("value",text); //4-5让文本框可以响应键盘按下的事件，主要用于回车确认处理 input.keyup(function(event){ //0,获取当前用户按下的键码 //解决不同浏览器获取事件的差异 var myEvent = event || window.event; var kcode = myEvent.keyCode; //1,判断是不否是回车键按下 if(kcode==13) { var inputnode = $(this); //2,保存获取当前文本的内容 var inputtext = inputnode.val(); //3,清空td里边的内容 var tdNode = inputnode.parent(); //4,将保存文本的内容显示到td中 tdNode.html(inputtext); //5,让td重新拥有点击事件 tdNode.click(tdclick); } }) //5，将文本框加入到td里边去 td.append(input); //也可以用 input.appendTo(td) //6,可以将文本框里边的内容全部选中（需要将jquery对象转换成dom） 0：是input的索引值，因为只有一个input所以下标就是0 var inputdom = input.get(0); inputdom.select(); //（点一次可以，点第二次就坏菜了）所以需要清楚td的点击事件 td.unbind("click"); }