直接用html没问题，用JS动态生成html代码则不行

Question

我用JS生成了一个可以锁头的table，结构是一个3个div，一个head，一个body和一个foot：<div id="table_head" style="width:100%;height:23px;border:1px solid red"></div>
<div id="table_body" style="width:100%;overflow:auto;height:400px;border:1px solid green"></div>
<div id="table_foot"></div>
第一个是放置表头的地方（table_head）。table_body里是一个数据列表的table（JS生成的），和上面table_head里的table长度设置相同。可是数据出来之后，table_head里的table和table_body里的两个table的列宽不相同，也就是所说的对不齐。假设说table_head里的table的第一列为50px，那么如果说table_body里的table的第一列为50px，两个table就应该对齐，可是他却没有对齐。我不知道这么说大家明白不。我封装的列表js源码奉上，希望大虾能帮我修改修改。var _obj = null;
var Grid = function(obj,divname){
if(obj==null){return false;}
_obj = obj;
if(divname==undefined || divname==null || divname==""){divname = "list";}
var _table = new Array();

var _titleArr = new Array();
_titleArr = obj.title;//表头名称集
var _field = obj.field; //字段名称集
var _url = obj.url; //查询列表的url
var _params = (obj.params==undefined?null:obj.params);//查询参数
var _initTool = obj.initTool==(undefined||null||'')?false:true;//是否显示分页工具栏


// 如果没有表头则直接返回
if(_titleArr==undefined || _titleArr==null || _titleArr== ""){alert("请设置表头");return;}
// 如果没有字段映射则直接返回
if(_field==undefined || _field==null || _field== ""){alert("请设置映射名称");return;}

// 创建表头
_table.push("<table height='20' border='1' width='500' cellpadding='0' cellspacing='0'>");
_table.push("<tr style='height:20px;background-color:#C3DAF9'>");
for(var i=0;i<_titleArr.length;i++){
_table.push("<td style='padding-left:8px;' width='");
_table.push(_titleArr[i]['width']==""?'50px;':_titleArr[i]['width']);
_table.push("' id='_td_");
_table.push(i);
_table.push("' align='left'>");
_table.push(_titleArr[i].header+_titleArr[i]['width']);
_table.push("</td>");
}
_table.push("</tr>");
_table.push("</table>");
alert(11111+"\n"+_table.join(''));
document.getElementById("table_head").innerHTML = _table.join('');
_table = null;
_table = new Array();
// 成功后的回掉函数
var successBack = function(data){
if (data.error != "") {
alert(data.error);
return;
} else {
_table.push("<table border='1' width='500' cellpadding='0' cellspacing='0'>")
var dataList = data.dataList;
for(var i=0;i<dataList.length;i++){
var color = i%2==0?"white":"yellow";
_table.push("<tr style='height:20px;background-color:"+color+"'>");
for(var j=0;j<_field.length;j++){
var _data = _field[j].mapping;
var _renderer = _field[j].renderer;
if(_renderer != null && typeof _renderer == "function"){
var _str = _renderer(i,dataList[i]);
_table.push("<td width='");
_table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
_table.push("'>");
_table.push(_str+_titleArr[j]['width']);
_table.push("</td>");
} else {
if(_data != ""){
_table.push("<td width='");
_table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
_table.push("'>");
_table.push(dataList[i][_data]+_titleArr[j]['width']);
_table.push("</td>");
}
}
}
_table.push("</tr>");
}
_table.push("</table>")
}
alert(22222+"\n"+_table.join(''));
document.getElementById(divname).innerHTML = _table.join('');
if(obj.success!=null){obj.success(dataList);}
}
this.load = function(){
$.post(_url,_params,successBack,"json");
};
var initTool = function(divName){
if(!this._initTool){return;}
     var _pagingToolbar = document.getElementById(divName);
    _pagingToolbar.innerHTML="&nbsp;&nbsp;&nbsp;<a id='pageFirst' href='#' onclick=''>&lt;&lt;第一页</a>&nbsp;&nbsp;"+
"    <a id='pagePrevious' href='#' onclick=''>&lt;上一页</a>"+
"    第&nbsp;<input type='text' id='ajaxPageNO' name='ajaxPageNO' value='' onkeypress='' class='sx-initTool-text' style='width: 40px'>"+
"    页/共<span id='totalSizeSpan'></span>页"+
"    <a id='pageNext' href='#'  onclick=''>下一页&gt;</a>&nbsp;&nbsp;"+
"              <a id='pageLast' href='#'  onclick=''>末尾页&gt;&gt;</a>"+
"&nbsp;&nbsp;&nbsp; 每页显示&nbsp;<select id='setlimit' name='setlimit' onchange='' class='select1'style='width:65px'>"+
"    <option value='5'>5条</option>"+
"    <option value='10'>10条</option>"+
"    <option value='15'>15条</option>"+
"    <option value='20'>20条</option>"+
"    <option value='30'>30条</option>"+
"    <option value='35'>35条</option>"+
"    <option value='45'>45条</option>"+
"    <option value='50'>50条</option>"+
"    <option value='60'>60条</option>"+
"    <option value='80'>80条</option>"+
"    <option value='100'>100条</option>"+
"    <option value='200'>200条</option>"+
" </select>"+
" &nbsp;&nbsp;&nbsp;&nbsp;"+
" 当前显示<span id='ajaxShowCount'></span>&nbsp;/&nbsp;共<span id='ajaxAllCount'></span>条";
   }
}
说白了其实就是想用div的方式实现锁头，因为火狐不支持CSS的锁头样式，所以只能采取这种方式，或者各位如果知道其他锁头的方法也可以，发在这里，大家也可以一同讨论！

Answer 1

你好，请问是哪个margin=0？是那两个table的吗？我给两个table都加了边框：
// 创建表头
_table.push("<table height='20' border='1' width='500' cellpadding='0' cellspacing='0'>");
和
_table.push("<table border='1' width='500' cellpadding='0' cellspacing='0'>")可以看到两个表格的宽度是相同的，两边不存在对不齐的问题，只是中间的几列不对齐，所以我认为不应该是margin的问题。
不过还是谢谢你的回答。CSDN不能上传图片，这么说大家可能还是不太懂……

Answer 2

你就直接用html好了！你这种写法太不理想！

Answer 3

这里我每个td都给了width，而且表头所在的table和数据列表所在的table的td长度均相同，我肯定的

Answer 4

   this.load = function(){
        $.post(_url,_params,successBack,"json");
    };
你用的是什么框架？我不能用你的代码调试。

Answer 5

   for(var i=0;i<_titleArr.length;i++){
        _table.push("<td style='padding-left:8px;' width='");
        _table.push(_titleArr[i]['width']==""?'50px;':_titleArr[i]['width']);
        _table.push("' id='_td_");
        _table.push(i);
        _table.push("' align='left'>");
        _table.push(_titleArr[i].header+_titleArr[i]['width']);
        _table.push("</td>");
    }delete the red place and have a try

Answer 6

用的jquery。查询数据库后返回的是一个json对象，类似于数组。后台是这样： public ModelAndView write(HttpServletResponse response){
try{
JSONObject json = new JSONObject();
json.put("error", error);
json.put("errorField", errorField);
json.putAll(data);
json.write(response.getWriter());
}catch(Exception e){
log.error(e.getMessage());
}
return null;
}其中data就是我查询出的结果，是一个map。前台js通过key，value形式获取数据的。我通过这个JS把要获取的字段名称(mapping)传给grid：var initPage = function(){
// $.post("department.do?method=getDepartmentInfo",null,successBack,"json");
var obj = {
url:'department.do?method=getDepartmentInfo',
params:null,
success:successBack,
title:[ {header:"记录操作",width:"100px;"},
{header:"序号",width:"50px;"},
{header:"所属公司",width:"250px;"},
{header:"部门名称",width:"150px;"}
 ],
field:[ {mapping:"",renderer:a},
{mapping:"rowno"},
{mapping:"companyName"},
{mapping:"name"}
 ]
}
grid = new Grid(obj,"table_body");
grid.load();
}
这一段就是通过grid添加数据的代码：for(var j=0;j<_field.length;j++){
var _data = _field[j].mapping;
var _renderer = _field[j].renderer;
if(_renderer != null && typeof _renderer == "function"){
var _str = _renderer(i,dataList[i]);
_table.push("<td width='");
_table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
_table.push("'>");
_table.push(_str+_titleArr[j]['width']);
_table.push("</td>");
} else {
if(_data != ""){
_table.push("<td width='");
_table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
_table.push("'>");
_table.push(dataList[i][_data]+_titleArr[j]['width']);
_table.push("</td>");
}
}
}
其中var _data = _field[j].mapping;是取得从另一个JS里传来的mapping值，然后传进grid里，通过这个mapping取得dataList的value值。
后面的 if(_data != ""){
_table.push("<td width='");
_table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
_table.push("'>");
_table.push(dataList[i][_data]+_titleArr[j]['width']);
_table.push("</td>");
}这一小段是将数据放入表体

Answer 7

because you are not set the style at these red place...(td)
                    for(var j=0;j<_field.length;j++){
                        var _data = _field[j].mapping;
                        var _renderer = _field[j].renderer;
                        if(_renderer != null && typeof _renderer == "function"){
                            var _str = _renderer(i,dataList[i]);
                            _table.push("<td width='");
                            _table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
                            _table.push("'>");
                            _table.push(_str+_titleArr[j]['width']);
                            _table.push("</td>");
                        } else {
                            if(_data != ""){
                                _table.push("<td width='");
                                _table.push(_titleArr[j]['width']==""?'50px;':_titleArr[j]['width']);
                                _table.push("'>");
                                _table.push(dataList[i][_data]+_titleArr[j]['width']);
                                _table.push("</td>");
                            }
                        }
                    }

Answer 8

原来是两个style没有进行相同设置的问题，明白了，多谢！还有flesu！