Js 动态添加table时 样式无法显示 求解~~~~~

我想创建一个这样的一个<td> <td width="25%" height="70" align="center">
  <table width="183" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="right" valign="top" class="button_back">
        <table width="131" border="0" cellspacing="0"         cellpadding="0">
          <tr>
            <td height="13"></td>
          </tr>
          <tr>
            <td class="button_font"><a href="#" class="a2" onClick="javascript:window.parent.addTab('<%=shortCutList.get(index).get("URL")%>','<%=shortCutList.get(index).get("NAME")%>');"><%=shortCutList.get(index).get("NAME")%></a></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</td>具体创建过程是这样的：
function createTd(url,name){
var topTd = document.createElement("td");
topTd.setAttribute('width','25%');
topTd.setAttribute('height','70');
topTd.setAttribute('align','center');

var table = document.createElement("table");
table.setAttribute('width','183');
table.setAttribute('border','0');
table.setAttribute('cellspacing','0');
table.setAttribute('cellpadding','0');

var tr = document.createElement("tr");

var td = document.createElement("td");
td.setAttribute('align','right');
td.setAttribute('valign','top');
td.setAttribute('class','button_back');

var innerTable = document.createElement("table");
innerTable.setAttribute('width','131');
innerTable.setAttribute('border','0');
innerTable.setAttribute('cellspacing','0');
innerTable.setAttribute('cellpadding','0');

var innerTableTr1 = document.createElement("tr");

var innerTableTd1 = document.createElement("td");
innerTableTd1.setAttribute('height','13');

var innerTableTr2 = document.createElement("tr");

var innerTableTd2 = document.createElement("td");
innerTableTd2.setAttribute('class','button_font');

var tdHref = document.createElement("a");
tdHref.setAttribute('href','#');
tdHref.setAttribute('class','a2');
tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
tdHref.innerHTML = name;

innerTableTd2.appendChild(tdHref);
innerTableTr2.appendChild(innerTableTd2);

innerTableTr1.appendChild(innerTableTd1);

innerTable.appendChild(innerTableTr1);
innerTable.appendChild(innerTableTr2);

td.appendChild(innerTable);

tr.appendChild(td);

table.appendChild(tr);

topTd.appendChild(table);

return topTd;
}
但是穿件之后 添加到table中 无法显示样式 连接点了也没有效果 求高手

解决方案 »

  1.   

    IE中，这句是无效的
    在IE中，table不能直接appendChild(tr)要由tbody.appendChild(tr)
    <body>
    <script type="text/javascript">
    function abc(){
    var row = document.createElement( "tr" );
    var cell = document.createElement( "td" );
    var tbody = document.createElement("tbody");
    var table = document.createElement("table");
    var cell_text = document.createTextNode( " 插 入的内容 " );
    cell.appendChild(cell_text);
    row.appendChild(cell);
    tbody.appendChild(row);
    table.appendChild(tbody);
    var div1=document.getElementById("div1");
    div1.appendChild(table);
    }</script>
    <div id="div1"></div>
    </body>你参考一下这
      

  2.   

    同意LS  或者用jquery也比较简单
      

  3.   

    在代码中加个alert语句看有没有undefined的，或者设个断点debugger，在IE中调试一下
      

  4.   

    function createTd(url,name){
    var topTd = document.createElement("td");
    topTd.setAttribute('width','25%');
    topTd.setAttribute('height','70');
    topTd.setAttribute('align','center');

    var table = document.createElement("table");
    table.setAttribute('width','183');
    table.setAttribute('border','0');
    table.setAttribute('cellspacing','0');
    table.setAttribute('cellpadding','0');

    var tr = document.createElement("tr");

    var td = document.createElement("td");
    td.setAttribute('align','right');
    td.setAttribute('valign','top');
    td.setAttribute('class','button_back');

    var innerTable = document.createElement("table");
    innerTable.setAttribute('width','131');
    innerTable.setAttribute('border','0');
    innerTable.setAttribute('cellspacing','0');
    innerTable.setAttribute('cellpadding','0');

    var innerTableTr1 = document.createElement("tr");

    var innerTableTd1 = document.createElement("td");
    innerTableTd1.setAttribute('height','13');

    var innerTableTr2 = document.createElement("tr");

    var innerTableTd2 = document.createElement("td");
    innerTableTd2.setAttribute('class','button_font');

    var tdHref = document.createElement("a");
    tdHref.setAttribute('href','#');
    tdHref.setAttribute('class','a2');
    tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
    tdHref.innerHTML = name;

    var tbody = document.createElement("tbody");
    var tbody1 = document.createElement("tbody");

    innerTableTd2.appendChild(tdHref);
    innerTableTr2.appendChild(innerTableTd2);

    innerTableTr1.appendChild(innerTableTd1);

    tbody.appendChild(innerTableTr1);
    tbody.appendChild(innerTableTr2);

    innerTable.appendChild(tbody);

    td.appendChild(innerTable);

    tr.appendChild(td);

    tbody1.appendChild(tr)
    table.appendChild(tbody1);

    topTd.appendChild(table);

    return topTd;
    }
      

  5.   


    <body>
    <script type="text/javascript">
    function createTd(url,name){//我整理如下//以下是内嵌innerTable var innerTableTd1 = document.createElement("td");
     innerTableTd1.setAttribute('height','13'); var innerTableTr1 = document.createElement("tr"); innerTableTr1.appendChild(innerTableTd1); var tdHref = document.createElement("a");
     tdHref.setAttribute('href','#');
     tdHref.setAttribute('class','a2');
     tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
     tdHref.innerHTML = name; var innerTableTd2 = document.createElement("td");
     innerTableTd2.setAttribute('class','button_font'); var innerTableTr2 = document.createElement("tr"); innerTableTd2.appendChild(tdHref);
     innerTableTr2.appendChild(innerTableTd2); var tbody = document.createElement("tbody"); tbody.appendChild(innerTableTr1);
     tbody.appendChild(innerTableTr2); var innerTable = document.createElement("table");
     innerTable.setAttribute('width','131');
     innerTable.setAttribute('border','0');
     innerTable.setAttribute('cellspacing','0');
     innerTable.setAttribute('cellpadding','0'); innerTable.appendChild(tbody);//至此 var td = document.createElement("td");
     td.setAttribute('align','right');
     td.setAttribute('valign','top');
     td.setAttribute('class','button_back'); td.appendChild(innerTable); var tr = document.createElement("tr"); tr.appendChild(td); var tbody1 = document.createElement("tbody"); tbody1.appendChild(tr) var table = document.createElement("table");
     table.setAttribute('width','183');
     table.setAttribute('border','0');
     table.setAttribute('cellspacing','0');
     table.setAttribute('cellpadding','0'); table.appendChild(tbody1);return table;//我不知道 您把topTd放哪了，所以我就上面的table返回出来测试，貌似没问题 var topTd = document.createElement("td");
     topTd.setAttribute('width','25%');
     topTd.setAttribute('height','70');
     topTd.setAttribute('align','center'); topTd.appendChild(table); return topTd;
     }
    document.body.appendChild(createTd(123,123));
    </script>
    </body>
      

  6.   

    在外层 我已经创建好了一个
    <table id="start">
      <tr>....</tr>
      ....
      <tr>
        <***********>
      </tr>
    </table>我就是想把创建好的td放到<***********>的位置
    var table = document.getElementById('start');//获取table
    var tableRows = table.rows;//获取table有多少行   var lastRow = table.rows[tableRows.length-1];//获取最后一行           var cellsLength = lastRow.cells.length; //获取最后一行有几列元素   var tableBody = table.firstChild;//获取tbody
    var lastchild = tableBody.lastChild;//获取tbody的最后一个</tr>if(cellsLength != 4){ var td = createTd(url,name);
            lastchild.appendChild(td);
    }else{
    var td = createTd(url,name);
    var tr = document.createElement('tr');
    tr.appendChild(td);
    tableBody.appendChild(tr);
    }我具体想做的是这样一个table 每行4列， 如果最后一列没有达到4列，则将创建的<td>添加到该列上，如果最后一行已经是4列，就会新创建一个<tr>,并将新创建的<td>放到这个<tr>上，添加是可以添加上去，就是没有前面的样式
      

  7.   

    你是说，添加新的单元格后，破坏了原来表格的样式？如果是这样，我的理解应该是 topTd 的width="25%"的原因<html>
    <head>
    <style>#at td{background:black;}</style>
    </head>
    <body>
    <script type="text/javascript">
    function createTd(url,name){/////////////////////////////// var innerTableTd1 = document.createElement("td");
     innerTableTd1.setAttribute('height','13'); var innerTableTr1 = document.createElement("tr"); innerTableTr1.appendChild(innerTableTd1); var tdHref = document.createElement("a");
     tdHref.setAttribute('href','#');
     tdHref.setAttribute('class','a2');
     tdHref.setAttribute('onClick',"javascript:window.parent.addTab('" + url + "','" + name + "');");
     tdHref.innerHTML = name; var innerTableTd2 = document.createElement("td");
     innerTableTd2.setAttribute('class','button_font'); var innerTableTr2 = document.createElement("tr"); innerTableTd2.appendChild(tdHref);
     innerTableTr2.appendChild(innerTableTd2); var tbody = document.createElement("tbody"); tbody.appendChild(innerTableTr1);
     tbody.appendChild(innerTableTr2); var innerTable = document.createElement("table");
     innerTable.setAttribute('width','131');
     innerTable.setAttribute('border','0');
     innerTable.setAttribute('cellspacing','0');
     innerTable.setAttribute('cellpadding','0'); innerTable.appendChild(tbody);//////////////////////////////////// var td = document.createElement("td");
     td.setAttribute('align','right');
     td.setAttribute('valign','top');
     td.setAttribute('class','button_back'); td.appendChild(innerTable); var tr = document.createElement("tr"); tr.appendChild(td); var tbody1 = document.createElement("tbody"); tbody1.appendChild(tr) var table = document.createElement("table");
     table.setAttribute('width','183');
     table.setAttribute('border','0');
     table.setAttribute('cellspacing','0');
     table.setAttribute('cellpadding','0'); table.appendChild(tbody1); var topTd = document.createElement("td");
     //topTd.setAttribute('width','25%');
     topTd.setAttribute('height','70');
     topTd.setAttribute('align','center'); topTd.appendChild(table); return topTd;
     }
    </script>
    <table id="start" border="1">
    <tr onclick="alert(this.cells.length);">
    <td width="30px" height="30px"></td>
    <td width="30px" ></td>
    <td width="30px" ></td>
    <td width="30px" ></td>
    </tr>
    <tr onclick="alert(this.cells.length);">
    <td width="30px" height="30px"></td>
    <td width="30px" ></td>
    <td width="30px" ></td>
    <td width="30px" ></td>
    </tr>
    </table>
    <script type="text/javascript">
    var   table   =   document.getElementById( 'start');//获取table 
    var   tableRows   =   table.rows;//获取table有多少行
    var   lastRow   =   table.rows[tableRows.length-1];//获取最后一行
    var   cellsLength   =   lastRow.cells.length; //获取最后一行有几列元素
    //var   tableBody   =   table.firstChild;//获取tbody 
    var   tableBody=table.getElementsByTagName("tbody")[0];//兼容FF方式~
    //var   lastchild   =   tableBody.lastChild;//获取tbody的最后一个 </tr> 
    var   lastchild=lastRow;//兼容FF方式~var url="我是一个可耻的地址",name="我是一个可耻的名字";
    if(cellsLength   !=   4){
     var   td   =   createTd(url,name); 
     lastchild.appendChild(td); 
    }else{ 
     var   td   =   createTd(url,name); 
     var   tr   =   document.createElement( 'tr'); 
     tr.appendChild(td); 
     tableBody.appendChild(tr); 
    }
    </script>
    </body>
    </html>
      

  8.   


    1.element 要用 getElementById or ByTagName 来得到，
    2.setAttribute("class", vName) 中 class 是指改变 "class" 这个属性，所以要带引号。
    3.IE 中要把 class 改成 className,.....IE 不认 class, 所以最好写两句，都用上吧。
    W3C DOM - {setAttribute()}
    setAttribute(string name, string value) ：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
     
    1 、关于 class 和 className
    class 属性在 W3C DOM 中扮演着很重要的角色，但由于浏览器差异性仍然存在。使用setAttribute("class", vName) 语句动态设置
    Element 的 class 属性在 firefox 中是行的通的，在 IE 中却不行。因为使用 IE 内核的浏览器不认识 "class" ，要改用 "className" ；
    同样， firefox  也不认识 "className" 。所以常用的方法是二者兼备：
       element.setAttribute("class", vName);
       element.setAttribute("className", vName);  //for IE
     
    2 、 setAttribute() 的差异
    我们经常需要在 JavaScript 中给 Element 动态添加各种属性，这可以通过使用 setAttribute() 来实现，这就涉及到了浏览器的兼容性问题。
    var bar = document.getElementById("foo");
    bar.setAttribute("onclick", "javascript:alert('This is a test!');");
    这里利用 setAttribute 指定 e 的 onclick 属性，简单，很好理解。但是 IE 不支持， IE 并不是不支持 setAttribute这个函数，
    而是不支持用 setAttribute 设置某些属性，例如对象属性、集合属性、事件属性，也就是说用 setAttribute 设置style 和 onclick 这些属性
    在 IE 中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置 Element 的对象属性、集合属性和事件属性。
    document.getElementById("foo").className = "fruit";
    document.getElementById("foo").style.cssText = "color: #00f;";
    document.getElementById("foo").style.color = "#00f";
    document.getElementById("foo").onclick= function () { alert("This is a test!"); 、