我写了一个动态生成表格的JS code，向各位请教...

2008-03-24 11:40:07 　　来自: BlueFish (北京)


	标题：我写了一个动态生成表格的JS code，向各位请教些问题

　　我是做嵌入式软件WebUI的，在动态的数据生成表格时，以前都是直接document.writeln，这种方法来做，每一个动态表格就要写一次，很麻烦而且以后维护，修改会很困难。
　　我写了一个类似控件的东东（不知道是否该这么叫），下面是我写的Code，大家帮我看看是否可行。
　　
　　function draw_tbl(){
　　 var div_id = this.div_id;
　　 var width = this.width;
　　 var border = this.border;
　　 var cellspacing = this.cellspacing;
　　 var cellpadding = this.cellpadding;
　　 var class_sty = this.class_sty;
　　 var data = this.data;
　　 var table_head = this.table_head;
　　 var table_title = this.table_title;
　　
　　
　　
　　 var txt = "";
　　 var div_element = document.getElementById(div_id);
　　 var tbl_element = document.createElement("table");
　　 tbl_element.setAttribute("border",border);
　　 tbl_element.setAttribute("width",width);
　　 tbl_element.setAttribute("cellspacing",cellspacing);
　　 tbl_element.setAttribute("cellpadding",cellpadding);
　　
　　 tbl_element.className = class_sty;
　　
　　 /*------Write Table Head Row------------------------*/
　　 var tbl_head = document.createElement("thead");
　　
　　 /*----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 = "tb_sty";
　　 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 = "tb_sty";
　　 tbl_th.innerHTML = table_head[0][i];
　　 tbl_head_row.appendChild(tbl_th);
　　 }
　　 tbl_head.appendChild(tbl_head_row);
　　 /*--------End---------------------------------------------*/
　　
　　 /*--------End of Table Head Row---------------------------------*/
　　
　　
　　 var tbl_body = document.createElement("tbody");
　　
　　 /*-----Write Table Body Row------*/
　　 for(i=0;i<data.length;i++) {
　　 var tbl_Row = document.createElement("tr");
　　 for(j=0;j<data[i].length;j++) {
　　 var tbl_Coll = document.createElement("td");
　　
　　 tbl_Coll.className = "tb_sty";
　　
　　 tbl_Coll.innerHTML = data[i][j];
　　 tbl_Row.appendChild(tbl_Coll);
　　 }
　　 tbl_body.appendChild(tbl_Row);
　　
　　 }
　　 /*--------End-----------------*/
　　 tbl_element.appendChild(tbl_head);
　　 tbl_element.appendChild(tbl_body);
　　 div_element.appendChild(tbl_element);
　　
　　
　　
　　}
　　
　　
　　
　　function Table(table_property,div_id,table_data) /*table_property:构造表格的参数；div_id：表格构造的位置；table_data：表格的数据*/
　　{
　　 this.div_id = div_id;
　　 this.width = table_property.width;
　　 this.border = table_property.border;
　　 this.cellspacing = table_property.cellspacing;
　　 this.cellpadding = table_property.cellpadding;
　　 this.class_sty = table_property.class;
　　 this.table_head = table_property.table_head;
　　 this.table_title = table_property.table_title;
　　
　　 this.data = table_data;
　　
　　 this.tbl_create = draw_tbl;
　　
　　
　　
　　}
　　
　　现在是我遇到的问题来了。
　　问题1：现在我能够动态生成表格了，但是我不知道该怎么控制每列的宽度。因为每个表格每一列的宽度都可能会不一样，这种情况下我该怎么实现？
　　
　　问题2：每个表格中不可能都是字符类的数据，有可能还会有一些操作控制，比如没行数据可能有添加，删除等的控制按钮。面对这种问题我利用for循环来生成每个单元格的方法，显然是行不通的。可否给我解决问题的方法。