html中如何使用js动态添加表格

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)

}

}