js添加删除行和双击变文本框的脚本
2008-07-22 00:00
375 查看
js添加删除行和双击变文本框---阿会楠练习作品
*{
font-size:12px;
}
#myTable{
background:#D5D5D5;
color:#333333;
}
#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 = "脚本之家 www.jb51.net";
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需刷新才能执行]
*{
font-size:12px;
}
#myTable{
background:#D5D5D5;
color:#333333;
}
#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 = "脚本之家 www.jb51.net";
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需刷新才能执行]
相关文章推荐
- js添加删除行和双击变文本框的脚本
- js添加删除行和双击变文本框的脚本
- 浏览器脚本兼容--文本框中,回车键触发事件的兼容
- javascript之文本框输入四个数字自动加空格的脚本
- winform设置文本框ctrl+A和双击实现全选
- 禁止服务器控件双击文本框选择
- Jquery实现鼠标双击Table单元格变成文本框
- table下的表格实现双击变为文本框,利用ajax提交表单
- 如何在双击后运行shell脚本
- 文本框双击事件弹出模态窗口接收返回值
- 解决ubuntu13.10下,无法双击运行脚本文件
- [windows]双击js脚本图标后调用cscript运行
- javascript 双击文本框编辑功能代码
- 直接双击运行PowerShell的脚本文件.ps1
- 【unity3d脚本】判断GUI双击代码
- Ubuntu中如何双击后运行shell脚本
- 双击td字段,出现编辑文本框(更改之后发送数据请求) jsp
- JS(十三)文本框脚本
- 浏览器脚本兼容 文本框中,回车键触发事件的兼容
- 使用脚本控制文本框的只读显示