方法一：最原始的方法，创建一一元素
var a1=document.createElement("table")var a2=document.createElement("tbody")
var a3=document.createElement("tr")
var a4=document.createElement("td")
//开始appendchild()追加各个元素
a3.appendChild(a4)
a2.appendChild(a3)
a1.appendChild(a2)
方法二：利用table对象里面含有的函数：插入行和插入列
var tabNode=document.createElement("table")var trNode=tabNode.insertRow()
var tdNode=trNode.insertCell
tabNode.innerHTML="这是采用table对象里面的函数创建的"
注意：利用原始方法，一个个createElement时候，必须要添加一个tbody对象
动态的创建和删除：
创建表格，通过输入的值：
function createTable() {tableNode = document.createElement("table") //获得对象
tableNode.setAttribute("id", "table")
var row = parseInt(document.getElementsByName("row1")[0].value) //获得行号
//alert(row)
if (row <= 0 || isNaN(row)) {
alert("输入的行号错误，不能创建表格，请重新输入：")
return
}
var cols = parseInt(document.getElementsByName("cols1")[0].value)
if (isNaN(cols) || cols <= 0) {
alert("输入的列号错误，不能创建表格，请重新输入：")
return
}
//上面确定了 现在开始创建
for (var x = 0 x < row x++) {
var trNode = tableNode.insertRow()
for (var y = 0 y < cols y++) {
var tdNode = trNode.insertCell()
tdNode.innerHTML = "单元格" + (x + 1) + "-" + (y + 1)
}
}
document.getElementById("div1").appendChild(tableNode) //添加到那个位置
}
删除行：
function delRow() {//要删除行，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id 方便操作
var tab = document.getElementById("table") //获得table对象
if (tab == null) {
alert("删除的表不存在！")
return
}
var rows = parseInt(document.getElementsByName("delrow1")[0].value) //获得要删除的对象
if (isNaN(rows)) {
alert("输入的行不正确。请输入要删除的行。。。")
return
}
if (rows >= 1 && rows <= tab.rows.length) {
tab.deleteRow(rows - 1)
} else {
alert("删除的行不存在！！")
return
}
}
删除列：
//删除列要麻烦些， 要通过行来进行删除// 一行的cells的长度就是列的个数
//tab.rows[x].deleteCell(cols-1)
function delCols() {
//获得table对象
var tab = document.getElementById("table")
if (tab == null) {
alert("删除的表不存在！！")
return
}
//获得文本框里面的内容
var cols = parseInt(document.getElementsByName("delcols1")[0].value)
//检查是否可靠
if (isNaN(cols)) {
alert("输入不正确。请输入要输出的列。。")
return
}
if (!(cols >= 1 && cols < tab.rows[0].cells.length)) {
alert("您要删除的行不存在！！")
return
}
for (var x = 0 x < tab.rows.length x++) {//所有的行
tab.rows[x].deleteCell(cols - 1)
}
}
<input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" /><script type="text/javascript">
function createTable(width,rows,cells)
{
//创建一个表格对象
var mytable=document.createElement("table")
mytable.cellSpacing="1px"
//创建一个表头对象
var mythead=document.createElement("thead")
for(a=0a<1a++)
{
var myrow=document.createElement("tr")
for(b=0b<cellsb++)
{
var mytd=document.createElement("td")
mytd.innerHTML="表 头 " +(b+1)
mytd.style.cssText="text-align:center"
myrow.appendChild(mytd)
}
mythead.appendChild(myrow)
}
//创建一个表体对象
var mytbody=document.createElement("tbody")
for(i=0i<rowsi++)
{
var myrow=document.createElement("tr")
for(j=0j<cellsj++)
{
var mytd=document.createElement("td")
mytd.style.backgroundColor="#fff"
mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列"
myrow.appendChild(mytd)
}
mytbody.appendChild(myrow)
}
//创建一个表脚对象
var mytfoot=document.createElement("tfoot")
for(c=0c<1c++)
{
var myrow=document.createElement("tr")
for(d=0d<1d++)
{
var mytd=document.createElement("td")
mytd.innerHTML="脚"+(d+1)
mytd.style.cssText="text-align:center"
mytd.colSpan="10"
myrow.appendChild(mytd)
}
mytfoot.appendChild(myrow)
}
//将表头追加到表格
mytable.appendChild(mythead)
//将表体追加到表格
mytable.appendChild(mytbody)
//将表脚追加到表格
mytable.appendChild(mytfoot)
//追加对象样式
mythead.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"
mytable.style.cssText="background-color:#999border:0pxwidth:"+width+"px"
mytfoot.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"
document.body.appendChild(mytable)
}
</script>
