JS怎么设置可编辑表格的值

发布网友 发布时间：2022-04-24 14:38

我来回答

共1个回答

热心网友 时间：2022-04-23 05:06

* JS实现可编辑的表格
* 用法:EditTables(tb1,tb2,tb2,......);
* Create by Senty at 2008-04-12
**/

//设置多个表格可编辑
function EditTables() {
for (var i = 0; i < arguments.length; i++) {
SetTableCanEdit(arguments[i]);
}
}

//设置表格是可编辑的
function SetTableCanEdit(table) {
for (var i = 1; i < table.rows.length; i++) {
SetRowCanEdit(table.rows[i]);
}
}

function SetRowCanEdit(row) {
for (var j = 0; j < row.cells.length; 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;

//设置文本框的失去焦点事件
textBox.onblur = function () {
CancelEditCell(this.parentNode, this.value);
}
//向当前单元格添加文本框
ClearChild(element);
element.appendChild(textBox);
textBox.focus();
textBox.select();

//改变状态变量
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
}
}

//为单元格创建选择框
function CreateDropDownList(element, value) {
//检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
if (editState != "true") {
//创建下接框
var downList = document.createElement("Select");
downList.className = "EditCell_DropDownList";

//添加列表项
var items = element.getAttribute("DataItems");
if (!items) {
items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}

if (items) {
items = eval("[" + items + "]");
for (var i = 0; i < items.length; i++) {
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}

//设置列表当前值
if (!value) {
value = element.getAttribute("Value");
}
downList.value = value;

//设置创建下接框的失去焦点事件
downList.onblur = function () {
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}

//向当前单元格添加创建下接框
ClearChild(element);
element.appendChild(downList);
downList.focus();

//记录状态的改变
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}

}