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)
}
}
使用Javascript可以实现work编辑功能，具体步骤如下：1. 定义一个函数，用来处理用户提交的编辑工作。例如：function handleEditWork(){....}
2. 为每个work添加edit按钮，当用户点击edit按钮时，触发handleEditWork函数，并将work的id作为参数传给handleEditWork函数。
3. 在handleEditWork函数中，根据work的id获取work的信息，并将其显示在页面上，以供用户修改。
4. 提供一个“保存”按钮，当用户点击“保存”按钮时，触发一个函数，用来将新的work信息保存到数据库中。
5. 刷新页面，显示新的work信息。
