使html表格可编辑状态,js+Html实现表格可编辑操作

本文实例为大家分享了js+Html实现表格可编辑操作的具体代码，供大家参考，具体内容如下

功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。

点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。

编辑表格数据

/**

* JS实现可编辑的表格

* 用法:EditTables(tb1,tb2,tb2,......);

**/

//设置多个表格可编辑

function EditTables(){

for(var i=0;i

SetTableCanEdit(arguments[i]);

}

}

//设置表格是可编辑的

function SetTableCanEdit(table){

for(var i=1; i

SetRowCanEdit(table.rows[i]);

}

}

function SetRowCanEdit(row){

for(var j=0;j

//如果当前单元格指定了编辑类型，则表示允许编辑

var editType = row.cells[j].getAttribute("EditType");

if(!editType){

//如果当前单元格没有指定，则查看当前列是否指定

editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");

}

if(editType){

row.cells[j].onclick = function (){

EditCell(this);

}

}

}

}

//设置指定单元格可编辑

function EditCell(element, editType){

var editType = element.getAttribute("EditType");

if(!editType){

//如果当前单元格没有指定，则查看当前列是否指定

editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");

}

switch(editType){

case "TextBox":

CreateTextBox(element, element.innerHTML);

break;

case "DropDownList":

CreateDropDownList(element);

break;

default:

break;

}

}

//为单元格创建可编辑输入框

function CreateTextBox(element, value){

//检查编辑状态，如果已经是编辑状态，跳过

var editState = element.getAttribute("EditState");

if(editState != "true"){

//创建文本框

var textBox = document.createElement("INPUT");

textBox.type = "text";

textBox.className="EditCell_TextBox";

//设置文本框当前值

if(!value){

value = element.getAttribute("Value");

}

textBox.value = value;

//设置文本框的失去焦点事件

textBo