您的位置：首页 > Web前端 > JavaScript

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

2011-06-25 19:38 302 查看

<!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.jb51.net";

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航