js添加删除行和双击变文本框的脚本- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js添加删除行和双击变文本框的脚本

Javascript: jquery中常用的SET和GET; 解javascript 混淆加密收藏; JavaScript 在线压缩和格式化收藏; JavaScript URL参数读取改进版; javascript打开新窗口同时关闭旧窗口; 借用Google的Javascript API Loader来加速你的网站; javascript Xml增删改查(IE下)操作实现代码; js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效); 最近项目写了一些js，水平有待提高; JavaScript库开发规则; JavaScript入门教程(1) 什么是JS; JavaScript入门教程(2) JS基础知识; JavaScript入门教程(3) js面向对象; JavaScript入门教程(4) js浏览器对象; JavaScript入门教程(5) js Screen屏幕对象; JavaScript入门教程(7) History历史对象; JavaScript入门教程(8) Location地址对象; JavaScript入门教程(9) Document文档对象; JavaScript入门教程(11) js事件处理; JavaScript入门教程(12) js对象化编程

No. « ‹ 124 125 126 127 › »

技术文章搜索

关键字

Javascript 中的 js添加删除行和双击变文本框的脚本

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 300 ::

收藏到网摘: n/a

javascript 支持ie和firefox杰奇翻页函数 JavaScript 版本自动生成文章摘要

发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head> <title>js添加删除行和双击变文本框---阿会楠练习作品</title> <style type="text/css"> *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } </style> <script type="text/javascript"> 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 = "软晨学习网 www.ruanchen.com"; td_3.innerHTML = "<input type='button' onclick='delRow(this)' value='删除' >"; }, //删除行 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); } </script>
</head>
<body>
<input type="button" onclick="addRow()" value="插入一行" />
<table id="myTable" border="0" cellpadding="0" cellspacing="1">
<tr><th>编号</th><th>姓名</th><th>操作</th></tr>
</table>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 支持ie和firefox杰奇翻页函数 JavaScript 版本自动生成文章摘要

Javascript 中的 js添加删除行和双击变文本框的脚本

评论 (0) All