怎么用javascript创建表格

JavaScript06

怎么用javascript创建表格,第1张

方法一：最原始的方法，创建一一元素

 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)

    } 

}

<HTML>

<script language="javascript">

var tableObj = null

function newTable(){

tableObj = document.createElement( "table" )

tableObj.border = "1"

divObj.appendChild( tableObj )

newRow.style.display = "block"

}

function AddRow(){

if( tableObj == null )

newTable()

var trObj = tableObj.insertRow() // 加一行

for(var i = 0i <3i ++){

var tdObj = trObj.insertCell() // 加一列

tdObj.innerText = tableObj.rows.length + "_" + (i + 1)

}

}

</script>

<BODY>

<button onclick="newTable()">创建表格</button><button id="newRow" style="display: none" onclick="AddRow()">添加新行</button>

<div id="divObj"></div>

</BODY>

</HTML>