1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2.在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
复制代码 代码如下:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
复制代码 代码如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
复制代码 代码如下:
<script type="text/javascript" src="test.js"></script>
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
复制代码 代码如下:
<table>
<thead></thead>
<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr")//创建行
td1=document.createElement("tr")//创建单元格
td1.appendChild(document.createTextNode("content"))//为单元格添加内容
row.appendChild(td1)//将单元格添加到行内
document.getElementById("rows").append(row)//将行添加到<tbody>中
1、在页面div中事先创建一个空白表格，可以根据需求而定。
2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。
3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。
4、获得表格中的数据。
5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。
*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)
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）