利用JS生成动态表格 - JavaScript论坛

bluefish8

等　级：新手上路
帖　子：3
专家分：0
注　册：2008-3-27

楼主

问题点数：0 回复次数：2

利用JS生成动态表格

我写了一个构造函数，想在需要生成动态表格时使用，这样可以减少无谓的写表格的工作。
大家看看我这样写是否可行。

程序代码：

// JavaScript Document
/*----------------------------------------------------*/
/*----------------------------------------------------
JS动态生成表格。
f_write_tbl_row，f_write_tbl_head两个函数是为了
调用不同的表格内容生成的函数。但是不知道这样写
是否合适。我不知道怎样在构造函数中调用不同的表格内容生成函数。
------------------------------------------------------*/
/*-----------------------------------------------------*/



function Grid(box_id,tbl_attribute,tbl_data,fuc_write_tbl_row,fuc_write_tbl_head)
{
    this.box_id = box_id;// 表格的位置
    this.tbl_attribute = tbl_attribute;//表格的各项属性
    this.tbl_data = tbl_data;//表格中的数据
    
    /*根据不同的表格调用不同的函数*/
    this.fuc_write_tbl_row = fuc_write_tbl_row;
    this.fuc_write_tbl_head = fuc_write_tbl_head;

    
    /*添加表格的方法*/
    this.create_tbl = create_tbl;

}

function f_write_tbl_row(fuc_write_tbl_row,tbl_body,tbl_element,tbl_data,tbl_cell_class)
{
    var txt = fuc_write_tbl_row + "(tbl_body,tbl_element,tbl_data,tbl_cell_class)" ;

    eval(txt);
    }
    
function f_write_tbl_head(fuc_write_tbl_head,tbl_head,tbl_element,tbl_head_data,tbl_title,tbl_head_class,tbl_title_class)
{
    var txt = fuc_write_tbl_head + "(tbl_head,tbl_element,tbl_head_data,tbl_title,tbl_head_class,tbl_title_class)";

    eval(txt);
    }

function create_tbl()
{
    var box_id = this.box_id;//表格位置
    /*表格属性*/
    var tbl_id = this.tbl_attribute.tbl_id;
    var tbl_width = this.tbl_attribute.tbl_width;
    var tbl_border = this.tbl_attribute.tbl_border;
    var tbl_cellpadding = this.tbl_attribute.tbl_cellpadding;
    var tbl_cellspacing = this.tbl_attribute.tbl_cellspacing;
    var tbl_class = this.tbl_attribute.tbl_class;
    var tbl_title = this.tbl_attribute.tbl_title;
    var tbl_head_data = this.tbl_attribute.tbl_head_data;
    
    var tbl_head_class = this.tbl_attribute.tbl_head_class;
    var tbl_title_class = this.tbl_attribute.tbl_title_class;
    var tbl_cell_class = this.tbl_attribute.tbl_cell_class;
    
    var tbl_data = this.tbl_data;
    
    /*画表格中的表头和表格内容*/
    var fuc_write_tbl_row = this.fuc_write_tbl_row;
    var fuc_write_tbl_head = this.fuc_write_tbl_head;

    var box = document.getElementById(box_id);
    var tbl_element = document.createElement("table");
    tbl_element.className = tbl_class;
    tbl_element.setAttribute("border",tbl_border);
    tbl_element.setAttribute("cellpadding",tbl_cellpadding);
    tbl_element.setAttribute("cellspacing",tbl_cellspacing);
    tbl_element.setAttribute("width",tbl_width);
    
    /*画表头--table title，table column title*/
    var tbl_head = document.createElement("thead");
    f_write_tbl_head(fuc_write_tbl_head,tbl_head,tbl_element,tbl_head_data,tbl_title,tbl_head_class,tbl_title_class)
    
    /*--------------------------------------*/
    /*画表中数据*/
    var tbl_body = document.createElement("tbody");
    f_write_tbl_row(fuc_write_tbl_row,tbl_body,tbl_element,tbl_data,tbl_cell_class);
    
    /*----------------------------------------*/
    
    box.appendChild(tbl_element);
    
    
}

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试用页面</title>
<script language="javascript" src="JS_Grid_1.js"></script>
<style type="text/css">
.tbl_sty{
background-color:#000000;

}
.tb_sty1{
background-color:#999999;
height:14px;
}
.tb_sty2{
background-color:#009999;
height:14px;
}
.tb_sty3{
background-color:#009900;
height:14px;
}
</style>
</head>

<body>
<div id="cnt1">

<script language="javascript">
var TableTitle = "Table Title";
var TableHead = new Array(
["title1","title2","title3"]
);
var Data = new Array(
["a1","a2","a3"],
["a1","a2","a3"],
["b1","b2","b3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"],
["c1","c2","c3"]


);



var tbl_attribute = new Object();
tbl_attribute.tbl_id = "test";
tbl_attribute.tbl_border = 0;
tbl_attribute.tbl_width = 700;
tbl_attribute.tbl_cellpadding = 2;
tbl_attribute.tbl_cellspacing = 1;
tbl_attribute.tbl_class = "tbl_sty";
tbl_attribute.tbl_head_class = "tb_sty1";
tbl_attribute.tbl_title_class = "tb_sty2";
tbl_attribute.tbl_cell_class = "tb_sty3";
tbl_attribute.tbl_title = TableTitle;
tbl_attribute.tbl_head_data = TableHead;




/*-------------Write Table Body Row-----------------*/
function writeTableRow(tbl_body,tbl_element,tbl_data,tbl_cell_class)
{
    
    for(i=0;i<tbl_data.length;i++) {
        var tbl_Row = document.createElement("tr");
        for(j=0;j<tbl_data[i].length;j++) {
            var tbl_Coll = document.createElement("td");
            if(tbl_cell_class != null) {
                
                tbl_Coll.className = tbl_cell_class;
            }
            tbl_Coll.title = "test";
                    
            tbl_Coll.innerHTML = tbl_data[i][j];
            tbl_Row.appendChild(tbl_Coll);
            
        }
        tbl_body.appendChild(tbl_Row);
    }
    
    tbl_element.appendChild(tbl_body);

    
}


/*----------------------------------------------------*/
function writeTableHead(tbl_head,tbl_element,table_head,table_title,tbl_head_class,tbl_title_class)
{
    /*----Add Table Title-------------------------------*/
    var table_title_row = document.createElement("tr");
    
    
    var table_title_cnt = document.createElement("th");

    table_title_cnt.colSpan = table_head[0].length;
    table_title_cnt.className = tbl_title_class;
    
    table_title_cnt.innerHTML = table_title;
    table_title_row.appendChild(table_title_cnt);
    
    tbl_head.appendChild(table_title_row);
    /*--------End----------------------------------------*/

    
    /*------Write Table Head--------------------------------*/
    var tbl_head_row = document.createElement("tr");
    
    for(i=0;i<table_head[0].length;i++) {
        var tbl_th = document.createElement("th");
        tbl_th.className = tbl_head_class;
        tbl_th.innerHTML = table_head[0][i];
        tbl_head_row.appendChild(tbl_th);
    }
    tbl_head.appendChild(tbl_head_row);
    /*--------End---------------------------------------------*/
    tbl_element.appendChild(tbl_head);
}


/*--------------End of Write Table Body Row-------------------------------*/

function addtbl()
{
    var tbl1 = new Grid("cnt1",tbl_attribute,Data,'writeTableRow','writeTableHead');
    tbl1.create_tbl();
    
}


</script>
</div>

<input type="button" value="click" id="btn1" name="btn1" onclick="addtbl();" />

</body>
</html>