js和jQuery实现双击表格变为可编辑状态

桃扇骨 2022-06-18 05:14 232阅读 0赞

看到别人的代码，自己分析加的备注，直接上代码！

<style type="text/css">  
body \{  
font-size: 12px;  
\}  
  
  
td \{  
border-width: 1px;  
border-top-style: solid;  
border-right-style: none;  
border-bottom-style: none;  
border-left-style: solid;  
text-align: center;  
width: 25%;  
height: 20px;  
\}  
table \{  
border-width: 1px;  
border-right-style: solid;  
border-bottom-style: solid;  
border-top-style: none;  
border-left-style: none;  
border-color: \#000;  
\}  
.text \{  
width: 95%;  
border: 1px dashed \#FF9900;  
\}  
</style>

/\*......................................................................................................................\*/

<script language="javascript">  
/\*    
修改的id值和单元格的值，可转成json串  
用ajax提交数据到后台，后台解析json，更新数据库  
\*/  
// 将单元格转化成文本框   
function changeTotext(obj) \{  
//获取标签内的文本值  
var tdValue = obj.innerText;  
alert(tdValue);  
obj.innerText = "";  
//创建input标签对象  
var txt = document.createElement("input");  
txt.type = "text";  
//将文本值赋给input的value  
txt.value = tdValue;  
//新建input的id值(可以用数据库的ID值)  
txt.id = "\_text\_000000000\_";  
//添加input节点，并放到td中  
obj.appendChild(txt);  
//选取域中的文本（双击时文本全选）  
txt.select();  
//双击之后改变样式  
//单元格边框样式  
obj.style.border = "1px dashed \#ff9900";   
//input标签边框  
txt.style.border = "0px";  
txt.style.outline = "none";  
\}  
// 取消单元格中的文本框，并将文本框中的值赋给单元格   
function cancel(obj) \{  
var txtValue = document.getElementById("\_text\_000000000\_").value;  
//更改之后的值  
obj.innerText = txtValue;  
  
\}  
  
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/  
// 事件   
document.ondblclick = function() \{  
//取得标签属性  
if (event.srcElement.tagName.toLowerCase() == "td") \{  
//获得触发事件的元素  
//对象  
changeTotext(event.srcElement);  
\}  
\}  
//当鼠标抬起执行  
document.onmouseup = function() \{  
if (document.getElementById("\_text\_000000000\_")  
&& event.srcElement.id != "\_text\_000000000\_") \{  
var obj = document.getElementById("\_text\_000000000\_").parentElement;  
cancel(obj);  
\}  
\}  
</script>  
</head>  
<body>  
<table width="50%" border="0" align="center" cellpadding="0"  
cellspacing="0">  
<tr>  
<td>dblclick</td>  
<td>eqweqwe</td>  
<td>qeqe</td>  
<td>ewqeq</td>  
</tr>  
</table>  
</body>

http://blog.mn886.net/jqGrid/

可以去jqgrid的demo详细查看

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS制作可编辑表格

<</span>html> ![JS制作可编辑表格][JS]<</span>head> ![JS制作可编辑表格][JS]<</span>title></</span>t

浅浅的花香味﹌/ 2024年02月17日 15:10/ 0 赞/ 41 阅读

相关前端：JS实现双击table单元格变为可编辑状态

相信这个功能对于很多同学都是很简单的了，但是对于我这个自称全栈的同学来说，还是值得做个笔记的，方便以后直接copy代码。这里就直接放代码了下面是有两种双击单元格的情况，

野性酷女/ 2022年12月01日 15:38/ 0 赞/ 558 阅读

相关 html双击变成可编辑状态,JS实现双击编辑可修改状态的方法

本文实例讲述了JS实现双击编辑可修改状态的方法。分享给大家供大家参考。具体如下：这是现在流行的一个表单特效，在网页上单击某文字，文字变为编辑状态，或者是让输入新文字，这就是

桃扇骨/ 2022年10月05日 12:49/ 0 赞/ 369 阅读

相关双击文本实现可编辑

双击文本实现可编辑 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w

r囧r小猫/ 2022年08月10日 13:48/ 0 赞/ 211 阅读

相关【JQuery】——可编辑的表格

【HTML】 <html> <head> <title>JQuery实例2：可以编辑的表格</title> <meta http-equiv="Content-T

梦里梦外;/ 2022年07月16日 13:49/ 0 赞/ 204 阅读

相关 jQuery 单击编辑双击编辑保存

<mce:script language="javascript" type="text/javascript"><!-- jQuery(docum

淩亂°似流年/ 2022年07月12日 13:41/ 0 赞/ 215 阅读

相关 js和jQuery实现双击表格变为可编辑状态

看到别人的代码，自己分析加的备注，直接上代码！ <style type="text/css"> body \{ font-size: 12px; \}

桃扇骨/ 2022年06月18日 05:14/ 0 赞/ 233 阅读

相关 JQuery实战：可编辑的表格

这篇文章介绍一个简单实例：可编辑的表格。表格效果图…… ![1342613703_8865.jpg][]![1342613955_1046.jpg][]

一时失言乱红尘/ 2022年06月09日 03:00/ 0 赞/ 252 阅读

相关 Jquery双击实现编辑文本框,ajax传递参数

可以下载[Demo][],包含springMVC的后台如何操作数据库需要修改的文本框 <td width="260" ondblclick="edit(thi

落日映苍穹つ/ 2022年06月01日 03:06/ 0 赞/ 269 阅读

相关 JQuery 双击动态编辑

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="./js/jquery.js"></script>

客官°小女子只卖身不卖艺/ 2021年12月21日 12:37/ 0 赞/ 264 阅读