利用JS生成动态表格(页 1) - JavaScript论坛

bluefish8 发表于 2008-3-27 11:19

利用JS生成动态表格

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

[code]// 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);

}[/code]

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta 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>
[/code]

渚薰发表于 2008-3-28 09:28

很有问题～～～～eval方法执行是错误的（不是调用错误，而是逻辑错误），虽然按照你的整个思路流程可以执行，但是，代码有很多值得优化的地方，下面给出该类定义的框架，具体代码你自己写

var Grid=function(id, attribute, fnCreateHead, fnCreateBody) {
this.id=id;
thid.attribute=attribute;

this._createHead=fnCreateHead;
this._createBody=fnCreateBody;
}

Grid.prototype={
   _createHead:function() {}, //这里可以是空函数
   _createBody:function() {}, //这里可以是空函数
   create:function() {
            //TODO sth
            this._createHead(...);
            this._createBody(...);
   }
}

Grid.prototype.constructor=Grid;

// ex.
var grid = new Grid(tbl_id, tbl_attribute,Data, writeTableRow， writeTableHead); //直接传函数的引用
grid.create();

bluefish8 发表于 2008-3-28 09:31

回复 2# 的帖子

多谢指教，我马上试试。

bluefish8 发表于 2008-3-28 13:28

回复 2# 的帖子

多谢版主，逻辑上的错误已经解决，我再进行代码的优化。
我的本意是想把表格的动态生成制作成一个控件，只要coder需要创建动态表格是，
直接定义个新的对象进行生成就可以了。但是每个表格的分布，或者单元格中还是会有
其他的操作。这样的话有什么办法能够将表格的基本特征抽象出来呢？

页: [1]