利用JS生成动态表格

最新推荐文章于 2023-10-26 17:49:54 发布

转载最新推荐文章于 2023-10-26 17:49:54 发布 · 690 阅读

文章标签：

#class #c #table #function #border #xhtml

js 专栏收录该内容

3 篇文章

订阅专栏

<!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">
// 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);


}

</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>

很有问题～～～～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();