如何通过javascript脚本在一个HTML页面上创建一个表格,并且能对表格内容进行编辑？

JavaScript022

如何通过javascript脚本在一个HTML页面上创建一个表格,并且能对表格内容进行编辑？,第1张

您好：首先动态创建表格。

定义好表格的html代码：

“<table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr></table>”

然后用js的createElement（）方法，或者用jqurey的$("html代码")创建元素。然后用apendchild()方法动态插入到网页中就可以了。td里面是文本框的话，默认就会有tab键移动光标等效果的，不用自己写。(自己写也可以，就是让文本框活的焦点，blur一下就行)。至于删除行和列的话，可以先的到删除行的id或者class，然后remove()一下就可以了。

<table border="1">

<tbody id="new">

<tr><td>a</td><td>1</td></tr>

<tr><td>b</td><td>2</td></tr>

<tr><td>c</td><td>3</td></tr>

</tbody>

</table>

<script type="text/javascript">

var table = document.getElementById("new")

// 增加行

var newTR= document.createElement("tr")

var newTD1 = document.createElement("td")

var newText1 = document.createTextNode("d")

var newTD2 = document.createElement("td")

var newText2 = document.createTextNode("4")

newTD1.appendChild(newText1)

newTD2.appendChild(newText2)

newTR.appendChild(newTD1)

newTR.appendChild(newTD2)

table.appendChild(newTR)

//增加列

var tr = table.getElementsByTagName("tr")

for(var i=0i<tr.lengthi++) {

var newTD = document.createElement("td")

var newText = document.createTextNode(i)

newTD.appendChild(newText)

tr[i].appendChild(newTD)

}

</script>

页面代码：

<body>

<h1 style="color: blue">

现在要插入几行几列的表格了，请点击按钮

<input type="button" value="插入表"

onclick="javascript:insertTable(5,6)" />

</h1>

<h1 style="color: #fcdb33">

您也可以删除创建的所有表格，请点击按钮

<input type="button" id="del" value="删除表格"

onclick="javascript:delTable()" />

</h1>

<div id="container"></div>

</body>

js代码：

/**

* 插入表格

* @param row 行数

* @param col 列数

* @return

*/

function insertTable(row,col) {

//页面要有个标签可以放即将创建的table，我用了div，你也可以用别的标签

var div = document.getElementById("container")

var table = document.createElement("table")

div.appendChild(table)

table.border = "1px"

table.style.width = "750px"

table.style.height = "250px"

table.style.color = "green"

//少了这个tbody元素，在IE下将无法正常显示table

var body = document.createElement("tbody")

table.appendChild(body)

for ( var n = 0n <parseInt(row)n++) {

var tr = document.createElement("tr")

body.appendChild(tr)

tr.style.color = "red"

for ( var i = 0i <parseInt(col)i++) {

var td = document.createElement("td")

tr.appendChild(td)

td.style.color = "orange"

var center = document.createElement("center")

td.appendChild(center)

center.innerHTML="行列"

}

}

}

/**

* 删除表格

*

* @return

*/

function delTable() {

var div = document.getElementById("container")

var tCount = div.childNodes.length

if (tCount >0) {

var t = document.getElementsByTagName("table")[0]

if (div == t.parentNode)

div.removeChild(t)

} else {

alert("已经没有表格了！！")

}

}