| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 | 
登录
注册
用户控制面板
搜索
道具
风格
短消息
论坛展区
帮助
编程论坛 → WEB开发 → 『 JavaScript论坛 』 → 利用JS生成动态表格
我的收件箱(0)
欢迎加入我们，一同切磋技术
用户名：   
 
密　码：  
共有 4015 人关注过本帖
标题：利用JS生成动态表格
只看楼主 加入收藏
bluefish8
Rank: 1
等　级：新手上路
帖　子：3
专家分：0
注　册：2008-3-27
楼主
收藏
 问题点数：0 回复次数：3 
利用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>
搜索更多相关主题的帖子: 表格　动态　
2008-03-27 11:19
渚薰
Rank: 6Rank: 6
等　级：贵宾
威　望：22
帖　子：1132
专家分：0
注　册：2006-8-6
第 2 楼
收藏
 得分:0 
很有问题～～～～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();

个人ajax技术专题站： " target="_blank">http://www. 我不会闲你烦，只会闲你不够烦！
2008-03-28 09:28
bluefish8
Rank: 1
等　级：新手上路
帖　子：3
专家分：0
注　册：2008-3-27
第 3 楼
收藏
 得分:0 
回复 2# 的帖子
多谢指教，我马上试试。
2008-03-28 09:31
bluefish8
Rank: 1
等　级：新手上路
帖　子：3
专家分：0
注　册：2008-3-27
第 4 楼
收藏
 得分:0 
回复 2# 的帖子
多谢版主，逻辑上的错误已经解决，我再进行代码的优化。
我的本意是想把表格的动态生成制作成一个控件，只要coder需要创建动态表格是，
直接定义个新的对象进行生成就可以了。但是每个表格的分布，或者单元格中还是会有
其他的操作。这样的话有什么办法能够将表格的基本特征抽象出来呢？
2008-03-28 13:28
快速回复：利用JS生成动态表格
数据加载中...
 
　　　



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.021094 second(s), 7 queries.
Copyright©2004-2025, BCCN.NET, All Rights Reserved