javascript 动态编辑表格
时间：2014-03-02 13:14:08
收藏：0
阅读：369
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>练习</title>
</head>
<style type="text/css">
.user{
color: #DFDFDF;
}
table {
border: 1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse: collapse;
width:600px;
}
table td {
border: 1px solid black;
width: 25%;
}
table th {
border: 1px solid black;
width: 25%;
}
tbody th {
background-color: #A3BAE9;
}
</style>
<body>
<div>
<form name="form1" id="form1">
username:<input type="text" id="username" name=‘user‘ onchange="checkUser(this)" value="5-15数字或者字母组成" onfocus="clearUser(this)" class="user" act="huang">
mail:<input type="text" id="mail" name="user" onchange="checkMail(this)" onfocus="clearMail(this)" value="电子邮件/Email" class="user">
phone:<input type="text" id="phone" name="user" onchange="checkPhone(this)" onfocus="clearPhone(this)" value="电话号码/手机号码/Phone" class="user">
<input type="button" value="添加" id="add" disabled="disabled">
</form>
</div>
<div style="margin-top:50px;">
<table id="table">
<tr>
<th align="center" >username</th>
<th align="center" >mail</th>
<th align="center" >phone</th>
<th align="center" >操作</th>
</tr>
<tr style="background-color: rgb(236, 233, 216);">
<td align="center" style="width:100px;" ondblclick="edituserValue(this)">huang</td>
<td align="center" style="width:100px;" ondblclick="edituserValue(this)">huang@qq.com</td>
<td align="center" style="width:100px;" ondblclick="edituserValue(this)">12345678912</td>
<td align="center" name="abs">
<input type="button" value="删除" <input type="button" value="编辑" </td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
/**
要善于利用console这个对象对js进行调试 用得比较多的方法 console.info() 可以查看对象，数组等所有类型 console.log() 用来记录参数的变化 这个案例完全兼容ie8
这个案例的学习要点： 对元素节点 属性节点 文本节点 的增加，删除，替换；正则表达式 面向对象 事件的绑定与触发 对象在事件中的传递 chrome 和firebug 进行调试，对各个对象属性的获取
创建元素的类
element html元素 例如li 类型 string
attr 为该元素设置属性 例如 var attr={style:‘width:10px;‘} 类型 Array(关联数组)
textnode 为该元素设置文本节点 类型 string
return 返回一个完整的该元素
**/
function createelement(element,attr,textnode){
this.element=element;
this.attr=attr;
this.textnode=textnode;
this.createed=null;
this.createelement=function(){
this.createed=document.createElement(this.element);
for (key in attr) {
this.createed.setAttribute(key,attr[key])
};
//由于但标签是没有文本节点的，类似input <br /> 等，暂时没有找到好的办法判断是不是单标签所以就只针对这个项目用得最多的input标签进行判断
if (this.createed.nodeName !=‘INPUT‘) {
this.createed.appendChild(document.createTextNode(this.textnode));
};
return this.createed;
}
}
/**
用于创建编辑时替换的input
**/
function createInput(oldTd){
//console.info(oldTd);
var attr={name:‘edituser‘,value:oldTd.childNodes[0].nodeValue,style:‘width:‘+140+‘px;height:‘+20+‘px;border-width: 0px;‘};
var input=new createelement(‘input‘,attr,‘‘);
return input.createelement();
}
/**
用于创建删除按钮并绑定点击事件
**/
function createInputDel(){
var attr={type:‘button‘,value:‘删除‘};
var inputdel=new createelement(‘input‘,attr,‘‘);
var inputDel=inputdel.createelement();
inputDel. delTr(this);
}
return inputDel;
}
/*
删除一行tr
*/
function delTr(_this){
var bool=confirm(‘你确定要删除吗？‘);
if (bool) {
_this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode);
};
}
/*
对一行表格进行编辑
*/
function editTr(obj){
//var this=obj; //不能重置this
if (obj.getAttribute(‘value‘)==‘编辑‘) {
var oldTd=obj.parentNode.previousSibling;
var i=1;
var editTd=new Array();
editTd[0]=oldTd;
while(oldTd=oldTd.previousSibling){
editTd[i]=oldTd;
i=i+1;
}
//console.info(editTd[1].nodeType);
for (var j =0; j < editTd.length; j++) {
if (editTd[j].nodeType==1) {
editTd[j].appendChild(createInput(editTd[j]));
editTd[j].removeChild(editTd[j].childNodes[0]);
};
};
obj.setAttribute(‘value‘,‘保存‘);
return false;
};
if (obj.getAttribute(‘value‘)==‘保存‘) {
var oldTd=obj.parentNode.previousSibling;
var i=1;
var editTd=new Array();
editTd[0]=oldTd;
while(oldTd=oldTd.previousSibling){
editTd[i]=oldTd;
i=i+1;
}
for (var j = 0; j < editTd.length; j++) {
if (editTd[j].nodeType==1) {
editTd[j].appendChild(document.createTextNode(editTd[j].childNodes[0].value)); ///这里的val值不能用getAttribute方法获取
editTd[j].removeChild(editTd[j].childNodes[0]);
};
};
obj.setAttribute(‘value‘,‘编辑‘);
return false;
};
}
/**
用于创建编辑按钮并绑定点击事件，使得存放用户值的Td可以编辑
**/
function createEditInput(){
var inputEdit=document.createElement(‘input‘);
var attr={type:‘button‘,value:‘编辑‘};
var inputedit=new createelement(‘input‘,attr,‘‘)
var inputEdit=inputedit.createelement();
//在创建元素时就可以绑定事件
inputEdit. editTr(this);
};
return inputEdit;
}
/**
用于存放删除按钮和编辑按钮的td
**/
function createEditTD(tr){
var editTd=document.createElement(‘td‘);
editTd.setAttribute(‘align‘,‘center‘);
editTd.setAttribute(‘name‘,‘abs‘);
editTd.appendChild(createInputDel());
editTd.appendChild(createEditInput());
tr.appendChild(editTd);
}
/**
用于创建存放用户值的td,b并且添加到tr中
**/
function createUserTd(userarr,td,tr){
for (var i = 0; i < userarr.length; i++) {
td[i]=document.createElement(‘td‘);
td[i].setAttribute(‘align‘,‘center‘);
td[i].setAttribute(‘style‘,‘width:100px;‘);
td[i].setAttribute(‘ondblclick‘,‘edituserValue(this)‘);
td[i].appendChild(document.createTextNode(userarr[i].value));
tr.appendChild(td[i]);
};
}
/**
用于双击事件进行用户值的编辑
**/
function edituserValue(obj){
if (obj.childNodes[0].nodeType==3) {
var attr={style:‘width:‘+(obj.clientWidth-5)+‘px;height:‘+(obj.clientHeight-5)+‘px;border-width: 0px;‘,value:obj.childNodes[0].nodeValue};
var Input=new createelement(‘input‘,attr,‘‘);
var input=Input.createelement();
obj.replaceChild(input,obj.childNodes[0]); //使用元素节点替换文本节点1
var val=input.value;
input.focus(); //start
input.value=‘‘; // 这三行代码可以做到让光标聚焦到input的输入框并且把光标移到最右边
input.value=val; //end
input.onchange=function(){
obj.replaceChild(document.createTextNode(input.value),input);
}
input.onblur=function(){
obj.replaceChild(document.createTextNode(input.value),input);
}
};
}
function verificationNull(userarr){
var error=new Array(‘用户名不正确‘,‘电子邮件不正确‘,‘电话号码不正确‘);
//var funName=new Array(‘checkUser‘,‘checkMail‘,‘checkPhone‘);
for (var i = 0; i < userarr.length; i++) {
if(userarr[i].value){
alert(error[i]);
return false;
}
};
return true;
}
/**
验证字符串是否由数字和字母的组成的
value string
min num
max num
返回 成立 true 不成立 false
**/
function verificationUser(value,min,max){
/* var min=arguments[1])?arguments[1]:5; //js 的三元表达式和php 差不多
var max=arguments[2])?arguments[2]:15; //加上这两句，可以当作js函数的默认值*/
var exp=new RegExp(‘[a-z\d]{‘+min+‘,‘+max+‘}‘,‘i‘);
return exp.test(value);
}
/**
验证电子邮件
value string
返回 成立 true 不成立 false
**/
function verificationMail(value){
var exp=new RegExp(‘^[a-z0-9]+@[a-z0-9]+\.[a-z]+‘,‘i‘);
return exp.test(value);
}
/**
验证电子邮件
value string
返回 成立 true 不成立 false
**/
function verificationPhone(value){
var exp=new RegExp(‘[0-9]{11}‘);
//var exp=new RegExp("[\d]{11}"); 不知道为什么这样写会错的
return exp.test(value);
}
/**
验证用户名并且设置输入框的样式
obj 对象
**/
function checkUser(obj){
if (!verificationUser(obj.value,5,15)) {
obj.setAttribute(‘style‘,‘border:1px solid red;‘);
add.setAttribute(‘disabled‘,‘disabled‘);
}else{
obj.removeAttribute(‘style‘);
usernameBool=true;
if (userPhoneBool && userMailBool) {
add.removeAttribute(‘disabled‘);
};
}
}
/**
验证电话并且设置输入框的样式
obj 对象
**/
function checkPhone(obj){
if (!verificationPhone(obj.value)) {
obj.setAttribute(‘style‘,‘border:1px solid red;‘);
add.setAttribute(‘disabled‘,‘disabled‘);
add.setAttribute(‘disabled‘,‘disabled‘);
}else{
obj.removeAttribute(‘style‘);
userPhoneBool=true;
if (userMailBool && usernameBool) {
add.removeAttribute(‘disabled‘);
};
}
}
/**
验证电子邮件并且设置输入框的样式
obj 对象
**/
function checkMail(obj){
if (!verificationMail(obj.value)) {
obj.setAttribute(‘style‘,‘border:1px solid red;‘);
add.setAttribute(‘disabled‘,‘disabled‘);
}else{
obj.removeAttribute(‘style‘);
userMailBool=true;
if (usernameBool && userPhoneBool) {
add.removeAttribute(‘disabled‘);
};
}
}
/**
改变value的值和的样式
obj 对象
**/
function clearUser(obj){
if (obj.value==‘5-15数字或者字母组成‘){
obj.value=‘‘;
obj.removeAttribute(‘class‘);
};
obj.onblur=function(){
if (!this.value){
this.value="5-15数字或者字母组成";
this.setAttribute(‘class‘,‘user‘);
};
if (this.value !="5-15数字或者字母组成"){
this.removeAttribute(‘class‘);
};
}
}
/**
改变value的值和的样式
obj 对象
**/
function clearMail(obj){
if (obj.value==‘电子邮件/Email‘){
obj.value=‘‘;
obj.removeAttribute(‘class‘);
};
obj.onblur=function(){
if (!this.value) {
this.value="电子邮件/Email";
this.setAttribute(‘class‘,‘user‘);
};
if (this.value !="电子邮件/Email") {
this.removeAttribute(‘class‘);
};
}
}
/**
改变value的值和的样式
obj 对象
**/
function clearPhone(obj){
if (obj.value==‘电话号码/手机号码/Phone‘){
obj.value=‘‘;
obj.removeAttribute(‘class‘);
};
obj.onblur=function(){
if (!this.value) {
this.value="电话号码/手机号码/Phone";
this.setAttribute(‘class‘,‘user‘);
};
if (this.value !="电话号码/手机号码/Phone") {
this.removeAttribute(‘class‘);
};
}
}
/*
在某个元素之后插入
*/
function insertAfter(newElement,targetElement){
var parentNodeElement=targetElement.parentNode;
if (parentNodeElement.lastChild=targetElement) {
parentNodeElement.appendChild(newElement);
}else{
parentNodeElement.insertBefore(newElement,targetElement.previousSibling);
}
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/
var usernameBool=false;
var userMailBool=false;
var userPhoneBool=false;
var add=document.getElementById(‘add‘);
add. var userarr=document.getElementsByName(‘user‘);
var table=document.getElementById(‘table‘).firstChild.nextSibling; //注意table的需要找到tboy
console.info(table);
var td=new Array();
var tr=document.createElement(‘tr‘);
tr.setAttribute(‘style‘,‘background-color: rgb(236, 233, 216);‘);
createUserTd(userarr,td,tr);
createEditTD(tr);
if(table.rows[1]){
table.insertBefore(tr,table.rows[1]); //这里才能有效table.rows[1]，如果是获取table；table.rows[1]会变为null
}else{
table.appendChild(tr);
}
document.form1.reset();
for (var i = 0; i < userarr.length; i++) {
userarr[i].setAttribute(‘class‘,‘user‘);
};
add.setAttribute(‘disabled‘,‘disabled‘);
usernameBool=false;userMailBool=false;userPhoneBool=false;
}
</script>
</html>本文出自 “Freax” 博客，请务必保留此出处http://freax.blog.51cto.com/6614733/1365508
javascript 动态编辑表格,布布扣,bubuko.com
原文：http://freax.blog.51cto.com/6614733/1365508
评论（0）