高手请进，菜鸟碰到项目难题了：求根据XML生成动态的表格，表格的列是动态且嵌套，分不够再加的

Question

  恩，我想的是，用户点击按钮后，根据XmlDomDetail内容 ，生成相应格式的表格 然后把DOM绑定表格的代码
  都弄了好几天了，没弄出来， 这个如果手工弄会郁闷的，产品随便好几百类。。
 效率也是个问题 啊 

Answer 1

http://blog.csdn.net/cyz1980/archive/2005/12/12/550684.aspx

Answer 2

xslt可以实现的，楼主你的意思是需要在客户端用JS生成一个TABLE吧？
但是你的XML中IE都编译不过，有"\"这个符号在引号外面。这个是生成的还是手写的？

Answer 3

XML是生成的 啊 ？？ 哦，你在使用时要把  \ 取掉
 "\"这个符号 我把 从调试分析器里COPY出来，他带有的   
<root>
    <PROCOMM_DETAIL FCTYPE="35" FSCID="1" FPRODUCTID="131" FPRODUCTNAME="14Q" FMONEY="250"/>
     <PROCOMM_DETAIL FCTYPE="35" FSCID="1" FPRODUCTID="132" FPRODUCTNAME="14NS-9000" FMONEY=""/>
     <PROCOMM_DETAIL FCTYPE="35" FSCID="1" FPRODUCTID="133" FPRODUCTNAME="14普平" FMONEY="250.000"/>
     <PROCOMM_DETAIL FCTYPE="35" FSCID="1" FPRODUCTID="587" FPRODUCTNAME="14NX-9000" FMONEY=""/>
     <PROCOMM_DETAIL FCTYPE="65" FSCID="1" FPRODUCTID="131" FPRODUCTNAME="14Q" FMONEY="888.020"/>
     <PROCOMM_DETAIL FCTYPE="65" FSCID="1" FPRODUCTID="132" FPRODUCTNAME="14NS-9000" FMONEY=""/>
     <PROCOMM_DETAIL FCTYPE="65" FSCID="1" FPRODUCTID="133" FPRODUCTNAME="14普平" FMONEY="256.000"/>
      <PROCOMM_DETAIL FCTYPE="65" FSCID="1" FPRODUCTID="587" FPRODUCTNAME="14NX-9000" FMONEY=""/>
      <PROCOMM_DETAIL FCTYPE="66" FSCID="1" FPRODUCTID="131" FPRODUCTNAME="14Q" FMONEY=""/>
      <PROCOMM_DETAIL FCTYPE="66" FSCID="1" FPRODUCTID="132" FPRODUCTNAME="14NS-9000" FMONEY=""/>
      <PROCOMM_DETAIL FCTYPE="66" FSCID="1" FPRODUCTID="133" FPRODUCTNAME="14普平" FMONEY=""/>
      <PROCOMM_DETAIL FCTYPE="66" FSCID="1" FPRODUCTID="587" FPRODUCTNAME="14NX-9000" FMONEY=""/>
 </root>

Answer 4

// Function : Create Table
function createTable(){  
document.getElementById("Detail").dataSrc="";   // release from  Data Binding 

var etTypeXml= BaseXmlDom.selectNodes("//root/ettype");
var detailXml = XmlDomDetail.selectNodes("//root/PROCOMM_DETAIL");
var mtXmllen = etTypeXml.length;  //  3 ettypes
var lendetail = detailXml.length;  // 4 childnodes
var widHead = 60/mtXmllen;
xxx
var strTmp111 = "--,";
var strTmp112 = "1,"
for (var t=0;t<mtXmllen;t++)  
{
var mtName = etTypeXml(t).getAttribute("FNAME");
strTmp111 += mtName + ",";   // top name
strTmp112 += (2 * widHead +1 ) + ",";  // top width every column
}

strTmp111 +=  "fscid" + "," + "FPRODUCTID" + ",";  // fscid
strTmp112 +=  "1" + "," + "1" + ",";  //fproductid

strTmp111 = strTmp111.substring(0,strTmp111.length-1);
strTmp112 = strTmp112.substring(0,strTmp112.length-1);

var arr111=strTmp111.split(",");   
var arr112=strTmp112.split(",");
//Create thead mytop
for(var j=0;j<arr111.length;j++) //6
{
tdobj=document.createElement("TD");
// if(j!=0 && j!=4 && j!=5){
// tdobj.colspan='3';}
tdobj.style.width=arr112[j]+"%";
with(tdobj)
{
innerHTML = "<font color='#fff'>" + arr111[j] + "</font>";
}
document.all.mytop.appendChild(tdobj);

if(j!=0 && j!=4 && j!=5){
tdobj.colspan='3';
}
try
{
document.all.mytop.cells(j).colspan=document.all.mytop.cells(j).colspan.replace("\\","");
}
catch(error)
{ }


strTmp111 = "产品名称,";
strTmp112 = "20,"

for (var i=0;i<mtXmllen;i++)  //  mtXmllen=3 
{
var mtName= etTypeXml(i).getAttribute("FNAME");
strTmp111 +=  mtName + ",";   // hide column ,to save ettype
strTmp111 +=  mtName + "原标准,";
strTmp111 +=  mtName + "调整价格,"; 

strTmp112 +=  "1" + ","    ;  // hide column,width:1
strTmp112 +=  widHead + ",";
strTmp112 +=  widHead + ",";
}

 strTmp111 +=  "fscid" + "," + "FPRODUCTID" + ",";  // fscid
 strTmp112 +=  "1" + "," + "1" + ",";  //fproductid
 
 strTmp111 = strTmp111.substring(0,strTmp111.length-1);
 strTmp112 = strTmp112.substring(0,strTmp112.length-1);
 
 var arr111=strTmp111.split(",");   
 var arr112=strTmp112.split(",");
//Create thead myhead
for(var j=0;j<arr111.length;j++) //12
{
tdobj=document.createElement("TD");
tdobj.style.width=arr112[j]+"%";
with(tdobj)
{
innerHTML = "<font color='#fff'>" + arr111[j] + "</font>";
}
document.all.myhead.appendChild(tdobj);
}
//Create tbody
strTmp111="FPRODUCTNAME,";
strTmp112="20,";

for (var i=0;i<mtXmllen;i++)  //  mtXmllen=3 
{
strTmp111 +=  "FCTYPE_" + i + ",";   // hide column ,to save ettype
strTmp111 +=  "FMONEY_" + i + ",";
strTmp111 +=  "FCHGMONEY_" + i +","; 

strTmp112 +=  "1" + ","    ;  // hide column,width:1
strTmp112 +=  widHead + ",";
strTmp112 +=  widHead + ",";
}


strTmp111 +=  "FSCID" + "," + "FPRODUCTID" + ",";  // fscid
strTmp112 +=  "1" + "," + "1" + ",";  //fproductid

strTmp111 = strTmp111.substring(0,strTmp111.length-1);
strTmp112 = strTmp112.substring(0,strTmp112.length-1);

arr111=strTmp111.split(",");
arr112=strTmp112.split(",");

for (var j=0;j<arr111.length;j++)  //12
{
tdobj=document.createElement("TD");
tdobj.style.width=arr112[j]+ "%";
with(tdobj)
{
innerHTML = "<div style='width:98%;' dataFld= '" + arr111[j] + "'></div>";
}
document.all.mydata.appendChild(tdobj);
}

document.getElementById("Detail").dataSrc="#XmlDomDetail"; // rebilding

               xxxx


}
在调试器中得到的结果 
<TD style=\"WIDTH: 1%\"><FONT color=#fff>--</FONT></TD>
<TD style=\"WIDTH: 41%\" colspan=\"3\"><FONT color=#fff>二类门店(曾辉录入的)</FONT></TD>
<TD style=\"WIDTH: 41%\" colspan=\"3\"><FONT color=#fff>三类门店(曾辉录入的)</FONT></TD>
<TD style=\"WIDTH: 41%\" colspan=\"3\"><FONT color=#fff>四类门店(464)</FONT></TD>
<TD style=\"WIDTH: 1%\"><FONT color=#fff>fscid</FONT></TD>
<TD style=\"WIDTH: 1%\"><FONT color=#fff>FPRODUCTID</FONT></TD>"我发现 那个 colspan=\"3\"  的 反斜杠 不能替换掉我想去掉，因为生成的表格 是错误的，不能识别  colspan="3"  这个属性

Answer 5

上面是 document.all.mytop.innerHTML 的结果

Answer 6

这个我现在不能做，我这里好多网站被屏蔽掉了
你的那个图片我打不了，看不到结果，我先给你个思路。
<script language=javascript>

<!--
Array.prototype.unique = function()
{
  var a = {}; for(var i=0; i<this.length; i++)
  {
    if(typeof a[this[i]] == "undefined")
      a[this[i]] = 1;
  }
  this.length = 0;
  for(var i in a)
    this[this.length] = i;
  return this;
}
    var orderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
    orderDoc.load("1.xml");
    var items = orderDoc.selectNodes("//root/PROCOMM_DETAIL").length ;
    var rowArray=new Array;
    for(var i=0;i<items;i++)
    {
     rowArray[i]=orderDoc.selectNodes("//root/PROCOMM_DETAIL")[i].getAttribute("FCTYPE");
    
    }
    var rowArrayNew=rowArray.unique();
//通过对array扩充了一个unique()方法，可以把重复的元素都去掉，这样就只剩3行了。
    document.createElement("TABLE")
//通过这个方法创建表格，appendChild方法添加
其实如果用xlst来实现可能比这个方法要省事的多，这个方法是在客户端在生成表格，而那个xlst其实就是一些样式，表格，以后你扩充也方便很多。CSDN这里就是读的XML文件，我想应该是ASP通过xlst读的xml文件。
    
    
 

</script>

Answer 7

document.all.mytop.cells(j).colspan=document.all.mytop.cells(j).colspan.replace("\\","");
这句有问题
document.all.mytop.cells(j).colspan这个你弹出来看看是什么东西
colspan属性应该是
colSpan这样才有

Answer 8

尝试用用XSL处理这个问题，会简便许多。

Answer 9

//Function : Delete Table
function deleteTable(){
document.getElementById("Detail").dataSrc="";

var  n=document.getElementById("Detail").rows.length;
var  n2=document.getElementById("Detail").rows[0].cells.length;
if (n2>0) 
 {
for (j=0;j<n;j++)
{
for (i=0;i<n2;i++)
{  
document.getElementById("Detail").rows[j].cells[i].innerHTML="";

}
 if (j>1)
{
}
}
//删除TR里的所有TD
for (j=0;j<n;j++)
{
var node=document.getElementById("Detail").rows[j];
var kids=node.childNodes;
var nn=kids.length;
for (i=nn-1;i>=0;i--)
{
node.removeChild(kids[i]);
}
} 
}
 
}
能否帮我优化这个函数