我正在从Javascript动态创建表。该表的结构如下。我需要为这个动态创建的表有固定的标题。
<table>
<thead><tr>
<th></th>
<th></th>
<th></th> <!-- the number of columns are based on server response -->
</tr></thead>
<tbody>
<tr><td><td></td></td></tr>
<tr><td><td></td></td></tr>
<tr><td><td></td></td></tr> <!-- the number of columns correspond to the headers and it varies dynamically -->
</tbody>
</table>
下面是我的javascript代码：我从数据库中获取表内容。我也在动态创建表格;
require(["jquery","dojox/widget/Standby","dojox/grid/DataGrid","dijit/registry", "dojo/dom-form", "dojo/dom", "dojo/on", "dojo/request","dojo/parser", "dojo/ready","dojo/domReady!"],
function($,Standby,DataGrid,registry, domForm, dom, on, request, parser, ready){
parser.parse();
// document.getElementById("productDetail").style.display = "none";
//document.getElementById("productDetail").style.visibility = "hidden";
var test=registry.byId("basicStandby1");
var pid=document.getElementById("productNumber").value;
if((pid != null) || (pid!="")){
displayGrid(pid);
}
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key]; var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
on(dom.byId("resetButton"), "click", function(){
location.reload(true);
});
function displayGrid(prodNum){
request("./product/"+prodNum).then(function(list){
if(list == "fail"){
registry.byId("basicStandby1").hide();
document.getElementById("errorMessage").innerHTML="Product number is not valid";
document.getElementById("errorMessage").style.display = "block";
document.getElementById("errorMessage").style.visibility = "visible";
document.getElementById("productDetail").style.display = "none";
document.getElementById("productDetail").style.visibility = "hidden";
}else{
var table=document.getElementById("productDetail");
var data=JSON.parse(list);
var itemDetail=data.product.items;
delete data.product.items;
delete data.product.data_longdescription;
var headerArray=[];
if(prodNum.trim().charAt(0) =='P'){
var table=document.createElement("TABLE");
var columnCount=Object.keys(data.product).length;
var keys=Object.keys(data.product);
var row=table.insertRow(-1);
for(var i=0;i<columnCount;i++){
var headerCell=document.createElement("TH");
var headerName=keys[i];
var imageURL = data.product[headerName];
if((headerName.indexOf("longdescription")>-1)){
delete data.product.headerName;
}
else{
if(imageURL.indexOf(".jpg") > -1){
data.product[headerName]="<img src='http://prod.tgw.com/wcsstore/CatalogAssetStore/"+imageURL+"'>";
}
headerCell.innerHTML=headerName.substring(headerName.lastIndexOf(".") + 1);
row.appendChild(headerCell);
}
}
var rowCount=Object.keys(data).length;
for(var k=0;k<rowCount;k++){
var row=table.insertRow(-1);
for(var j=0;j<columnCount;j++){
if(!(keys[j].indexOf("longdescription")>-1)){
var cell=row.insertCell(-1);
var name=keys[j];
cell.innerHTML = data.product[name];
}
}
}
var div = document.getElementById("productTable");
div.appendChild(table);
}
var vv=prodNum.charAt(0);
if(prodNum.trim().charAt(0) == 'I'){
document.getElementById("productTable").innerHTML = "Product Details not available";
}
var itemDetailArray=[];
for(var item in itemDetail){
for(var uu in itemDetail[item]){
if(!(itemDetailArray.indexOf(uu)>-1)){
itemDetailArray.push(uu);
}
}
}
var itemTable = document.createElement('TABLE');
var itemTableClone = document.createElement('TABLE');
var itemHead = document.createElement("THEAD");
var tableBody=document.createElement("TBODY");
itemTable.appendChild(itemHead);
itemTable.appendChild(tableBody);
var row1=itemHead.insertRow(-1);
itemTable.id='scrollTable';
itemHead.id='fixedHeader';
tableBody.id='scrollContent';
itemTableClone.id='header-fixed';
var itemArray=[];
var headerArray=[];
var arrayCheck=[];
for (var itemCount in itemDetail){
var dataArray=[];
var imageArray=[];
var itemDetails=[];
for (var j in itemDetail[itemCount]){
var itemDataDetail=itemDetail[itemCount][j];
dataArray.push(j);
itemDetails.push({
key:j,
value:itemDataDetail
});
}
for (var i in itemDetailArray){
if(!(dataArray.indexOf(itemDetailArray[i])>-1)){
itemDetails.push({
key:itemDetailArray[i],
value:null
});
}
var myList = sortByKey(itemDetails, "key");
}
if(itemCount==0){
var headerEDP=document.createElement("TH");
headerEDP.innerHTML="EDP Number";
row1.appendChild(headerEDP);
for (var i in myList){
document.getElementById("productDetail").style.display = "block";
document.getElementById("productDetail").style.visibility = "visible";
var j=myList[i].key;
var data=myList[i].value;
if(!((j.indexOf("variations.color")>-1)||(j.indexOf("parentid")>-1)||(j.indexOf("partnumber")>-1)||(j.indexOf("image")>-1)||(j.indexOf("ii.mercentSKU")>-1))){
if(!(j.indexOf("longdescription")>-1)){
if(j.indexOf("attributes.productid")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="MerchPIN";
row1.appendChild(headerCell1);
}else if(j.indexOf("webproductid")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="PID";
row1.appendChild(headerCell1);
}else if(j.indexOf("partnumber")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="EDPNumber";
row1.appendChild(headerCell1);
}else if(j.indexOf("shortdescription")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="Name";
row1.appendChild(headerCell1);
}else if(j.indexOf("tgwesiteproductspricelist")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="Price";
row1.appendChild(headerCell1);
}else if(j.indexOf("msrptgwpricelist")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="SRP";
row1.appendChild(headerCell1);
}else if(j.indexOf("attributes.color")>-1){
var headerCell1=document.createElement("TH");
headerCell1.innerHTML="ColorCode";
row1.appendChild(headerCell1);
}
else{
var headerCell1=document.createElement("TH");
var header_name = itemDetails[i].key;
headerCell1.innerHTML=j.substring(j.lastIndexOf(".") + 1);
row1.appendChild(headerCell1);
}
}
}
}
}
itemArray=[];
headerArray=[];
var row2=tableBody.insertRow(-1);
var EDPnumber;
for (var i in myList){
var j=myList[i].key;
var data=myList[i].value;
if(data!=null){
if((j.indexOf("partnumber")>-1)&&(data.trim().charAt(0) =='I')){
EDPnumber=data;
}
if(j.indexOf("image")>-1){
if(data.indexOf(".jpg")>-1){
imageArray.push({
key:j,
value:data
});
}else{
if(!(j.indexOf("parentid")>-1)){
imageArray.push({
key:j,
value:null
});
}
}
}
}else{
if((j.indexOf("image")>-1)){
imageArray.push({
key:j,
value:data
});
}
}
var j=myList[i].key;
var data=myList[i].value;
if(!((j.indexOf("variations.color")>-1)||(j.indexOf("parentid")>-1)||(j.indexOf("partnumber")>-1)||(j.indexOf("image")>-1)||(j.indexOf("ii.mercentSKU")>-1))){
//if(!((itemArray.indexOf(data) >-1) && (headerArray.indexOf(j.substring(j.lastIndexOf(".") + 1)) >-1))){
if(!(j.indexOf("longdescription")>-1)){
var cell=row2.insertCell(-1);
if(data!=null){
if(data.indexOf(".jpg") > -1){
if(j.indexOf("zoom") > -1){
data="<a href='http://prod.tgw.com/wcsstore/CatalogAssetStore/"+data+"'>Click to view Zoom Image</a>";
cell.innerHTML=data;
}else{
data="<img src='http://prod.tgw.com/wcsstore/CatalogAssetStore/"+data+"'>";
cell.innerHTML=data;
}
}else{
cell.innerHTML=data;
}
}
if(data==null){
cell.innerHTML=data;
}
}
}
}
console.log(imageArray);
for(var i in imageArray){
var imageData=imageArray[i].value;
imageKey=imageArray[i].key;
if(itemCount==0){
var headerCell1=document.createElement("TH");
if(imageKey.indexOf("zoom")>-1){
headerCell1.innerHTML="Zoom Image";
}else if(imageKey.indexOf("fullimage")>-1){
headerCell1.innerHTML="Full Image";
}else if(imageKey.indexOf("thumbnail")>-1){
headerCell1.innerHTML="ThumbNail Image";
}else{
headerCell1.innerHTML=imageKey;
}
row1.appendChild(headerCell1);
}
if((imageArray[i].key).indexOf("zoom") > -1){
var cell=row2.insertCell(-1);
if(imageData !=null){
imageData="<a href='http://prod.tgw.com/wcsstore/CatalogAssetStore/"+imageData+"'>Click to view Zoom Image</a>";
}else{
imageData=null;
}
cell.innerHTML=imageData;
}else{
var cell=row2.insertCell(-1);
if(imageData !=null){
imageData="<img src='http://prod.tgw.com/wcsstore/CatalogAssetStore/"+imageData+"'>";
}else{
imageData=null;
}
cell.innerHTML=imageData;
}
}
var cell=row2.insertCell(0);
cell.innerHTML=EDPnumber;
}
var div1 = document.getElementById("tableContainer");
div1.appendChild(itemTable);
document.getElementById("tableContainer").className = "tableContainer";
document.getElementById("scrollTable").className = "fixed_headers";
document.getElementById("scrollTable").style.width="100%";
document.getElementById("fixedHeader").className = "fixedHeader";
document.getElementById("scrollContent").className = "scrollContent";
}
});
//document.getElementById("productDetail").style.display = "none";
//document.getElementById("productDetail").style.visibility = "hidden";
}
on(dom.byId("submitButton"), "click", function(){
registry.byId("basicStandby1").show();
//document.getElementById("productDetail").style.display = "none";
//document.getElementById("productDetail").style.visibility = "hidden";
var table=document.getElementById("productDetail");
document.getElementById("productTable").innerHTML="";
document.getElementById("tableContainer").innerHTML="";
var productNumber=document.getElementById("productNumber").value;
var domain=document.getElementById("domain").value;
if(productNumber== ""){
//registry.byId("basicStandby1").hide();
document.getElementById("errorMessage").innerHTML="Please enter Product number";
document.getElementById("productDetail").style.display = "none";
document.getElementById("productDetail").style.visibility = "hidden";
document.getElementById("errorMessage").style.display = "block";
document.getElementById("errorMessage").style.visibility = "visible";
}
else{
document.getElementById("errorMessage").style.display = "none";
document.getElementById("errorMessage").style.visibility = "hidden";
displayGrid(productNumber);
}
});
});
下面是我的css代码：这个css代码我从网上得到它有固定的标题，但它似乎不起作用。
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
请帮我修一下这张桌子的标题。我在html页面中分别显示了很少的其他div和表。但是上面的表可能包含多达50个不同宽度的列，并且在滚动时必须有固定的标题。