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

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

Javascript: jQuery代码:jQuery控制表单里的回车键; 用DIV完美模拟createPopup 弹出窗口(脚本之家修正版)，支持Firefox,ie,chrome; jQuery Flash/MP3/Video多媒体插件; 9个JavaScript评级/投票插件; JS实现的radio图片选择按钮效果; IE中checkbox在刷新后初始化的问题; JavaScript 学习笔记（十一）; JS 对象介绍; javascript 哈希表(hashtable)的简单实现; jquery 防止表单重复提交代码; js parsefloat parseint 转换函数; javascript parseInt与Number函数的区别; JavaScript 学习笔记（十二） dom; JavaScript 学习笔记（十三）Dom创建表格; javascript 实现自由落体的方块效果; javascript 获取url参数和script标签中获取url参数函数代码; JAVASCRIPT style 中visibility和display之间的区别; javascript 拖放效果实现代码; jquery last-child 列表最后一项的样式; Jquery实战_读书笔记1—选择jQuery

No. « ‹ 279 280 281 282 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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