100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js添加删除行和双击变文本框的脚本【javascript】

js添加删除行和双击变文本框的脚本【javascript】

时间:2019-04-05 05:00:11

相关推荐

js添加删除行和双击变文本框的脚本【javascript】

web前端|js教程

js,添加行,删除行,双击变文本框

web前端-js教程

游戏html源码下载,ubuntu怎么看,tomcat8跟7的区别,恋听网爬虫,php数组添加若干个数据,外贸seo成本lzw

js添加删除行和双击变文本框—阿会楠练习作品

杰小说源码,ubuntu有线网设置,tomcat7 运行状态,爬虫限制次数,判断变量是否存在php,Seo 01 日本lzw

*{ font-size:12px;}#myTable{ background:#D5D5D5; color:#333333;}

学籍系统 源码,vscode模拟器文件管理,ubuntu损伤硬盘,idea未关闭tomcat,专业python爬虫,php题库源码,潍坊抖音seo搜索排名算法,网站logo源码lzw

#myTable tr{ background:#F7F7F7;}#myTable tr th{ height:20px; padding:5px;}#myTable tr td{ padding:5px;}

function $(obj){ return document.getElementById(obj);}

var num = 0;function row(id){ //构造函数 this.id = $(id);}row.prototype = { //插入行 insert:function(){ num = num + 1; var newTr = this.id.insertRow(-1); var td_1 = newTr.insertCell(0); var td_2 = newTr.insertCell(1); var td_3 = newTr.insertCell(2); td_1.innerHTML = num; td_2.innerHTML = “脚本之家 ”; td_3.innerHTML = “”; }, //删除行 del:function(obj){ var i = obj.parentNode.parentNode.rowIndex; this.id.deleteRow(i); }}

function addRow(){ var row2 = new row(“myTable”); row2.insert();}

function delRow(obj){var row1 = new row(“myTable”); row1.del(obj);}

var inputItem; // 输入框句柄var activeItem; // 保存正在编辑的单元格

//转成文本function changeToText(obj){ if( obj && inputItem ) { // 如果存在正在编辑的单元格, 则取消编辑状态, 并将编辑的数据保存起来 var str = ” “; if(inputItem.value != “”) str = inputItem.value; obj.innerText = str; }}

//转成编辑function changeToEdit(obj){if( !inputItem ) {inputItem = document.createElement(‘input’);inputItem.type = ‘text’;inputItem.style.width = ‘100%’;} // inputItem.style.display = ”;inputItem.value = obj.innerText; // 将该单元格的数据文本读到控件上obj.innerHTML = ”; // 清空单元格的数据obj.appendChild(inputItem);inputItem.focus();activeItem = obj;}

//双击时文本变成文本框document.ondblclick = function(){ if(event.srcElement.tagName.toLowerCase() == “td”){ if(!inputItem){ inputItem = document.createElement(“input”); inputItem.type = “text”; inputItem.style.width = “100%”; } changeToText(); changeToEdit(event.srcElement); }else{ event.returnValue = false; return false; }}

//单击时文本框变成文本document.onclick = function(){ if(event.srcElement.parentNode == activeItem || event.srcElement == activeItem) return; else changeToText(activeItem);}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。