怎么用javascript创建表格

Question

如题所述

Answer 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);
    } 
}