Javascript 将动态生成的表插入div时出现问题
我根据得到的ajax响应动态生成表的行。表格标题为静态/常量。我终于把这封信写给了一页上的一个div div同时具有水平和垂直滚动。我的问题是：如果假设我有100行，我就看不到标题/表列。我想让它像excel中的冻结窗格一样，在那里可以看到标题/列 我尝试将标题/列与行分开，但我面临的问题很广泛，即行td大小与标题不匹配。这是我的代码（示例代码）： 我想让它在IE7和Firefox中工作Javascript 将动态生成的表插入div时出现问题,javascript,html-table,Javascript,Html Table,我根据得到的ajax响应动态生成表的行。表格标题为静态/常量。我终于把这封信写给了一页上的一个div div同时具有水平和垂直滚动。我的问题是：如果假设我有100行，我就看不到标题/表列。我想让它像excel中的冻结窗格一样，在那里可以看到标题/列 我尝试将标题/列与行分开，但我面临的问题很广泛，即行td大小与标题不匹配。这是我的代码（示例代码）： 我想让它在IE7和Firefox中工作 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Some Page </title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id="dataDiv" style="white-space:nowrap; overflow-y:scroll; height:330px;overflow: scrollbars-vertical;overflow-x:scroll; width:100%;overflow: scrollbars-horizontal;">
</body>
</html>
<script>
function ProcessResponse(ajaxResponseData)
{
var dataList = ajaxResponseData.somDataList;
if(dataList != null)
{
var rowData = "<table border='1' width=1200px>";
rowData += "<tr>"
+ "<td colspan='6'><b>Header1</b></td>"
+ "<td colspan='4'><b>Header2</b></td>"
+ "<td colspan='4'><b>Header3</b></td>"
+ "<td colspan='4'><b>Header4</b></td>"
+ "<td colspan='4'><b>Header5</b></td>"
+ "<td colspan='4'><b>Header6</b></td>"
+ "<td colspan='4'><b>Header7</b></td>"
+ "<td colspan='4'><b>Header8</b></td>"
+ "<td colspan='4'><b>Header9</b></td>"
+ "<td colspan='4'><b>Header10</b></td>"
+ "<td colspan='4'><b>Header11</b></td>"
+ "<td colspan='4'><b>Header12</b></td>"
+ "<td colspan='4'><b>Header13</b></td>"
+"</tr>";
for(var i=0;i<dataList.length;i++)
{
var someRowData=new Object();
someRowData = dataList[i];
rowData+="<tr>"
+"<td colspan='6'>"
+someRowData.Header1_data+" "
+"</td><td colspan='4'>"
+someRowData.Header2_data
+"</td><td colspan='4'>"
+someRowData.Header3_data
+"</td><td colspan='4'>"
+someRowData.Header4_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header5_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header6_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header7_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header8_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header9_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header10_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header11_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header12_data
+"</td>"
+"</td><td colspan='4'>"
+someRowData.Header13_data
+"</tr>";
}
rowData+="</table>";
var dataDiv=document.getElementbyId("dataDiv");
if(dataList.length == 0)
{
dataDiv.innerHTML="";
}
else
{
dataDiv.innerHTML=rowData;
}
}
}
</script>
某页
函数ProcessResponse（ajaxResponseData）
{
var dataList=ajaxsresponsedata.somDataList；
如果（数据列表！=null）
{
var rowData=“”；
行数据+=“”
+“校长1”
+“校长2”
+“校长3”
+“校长4”
+“校长5”
+“校长6”
+“校长7”
+“校长8”
+“校长9”
+“校长10”
+“校长11”
+“校长12”
+“校长13”
+"";
对于（var i=0；i，您必须稍微使用css
看看这个：
您需要做的是将溢出：自动；
设置为tbody
元素，而不是div
（并将th
元素保留在thead
元素中）。这在Firefox之外的任何东西中都不起作用（没有一些调整/破解）（也可能是Opera，不确定）。检查@smnbss提供的链接，您可能会解决它。最大的问题是，如果您想让它在所有浏览器中工作，您必须为所有单元格设置固定宽度。@Nomad右键单击查看源代码，这是我尝试的纯css表@Tom Ingram，谢谢，但在您的示例中，单元格没有与页眉对齐。我如果我想要10个标题？@smnbss显然IE9不是“四大”的成员@Nomad虽然smnbss提供的链接的源代码有很多，但大部分都是样式化的，值得一读，因为它似乎考虑到了不同的浏览器。我已经更新了我的链接，以使用固定大小columns@TomIngram，谢谢你更新它。它在FF中有效，但在IE7中标题消失了。我的意思是效果在f中有效在FF 3.6中，如果滚动header1和header2消失，则在IE7中显示。