DOM操作表的问题。。。。。。。。。。。

...
tr.appendChild(td);
tr.style.height="100px";
td.innerText="what is that";
document.getElementById("list").appendChild(tr);
...是不是要这种效果？

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>add</title>
    </head><body>
    <button onclick="add()">add</button>
    <table border="1px">
        <tr>
            <td>
                <table>
                    <tr><td>what is that</td></tr>
                </table>
            </td>
        </tr>
        <tbody id="list"></tbody>
    </table><script type="text/javascript">
    function add()
    {
    var tb = document.getElementById("list");//不知道你要往哪加，我就当往list里面加了
    var row = tb.insertRow();//插入一行，可以在后面加上数字，表示插入到哪个位置
    var cell = row.insertCell();//行里面插入一列
    var table = document.createElement("table");//建立table
    var inner_row = table.insertRow();//新的table里面插入一行
    var inner_cell = inner_row.insertCell();//新的列
    inner_cell.innerHTML = "test text";//新的列的数据
    cell.appendChild(table);//把新建立的表格，插入到cell里面
    }
    </script>
    </body></html>
      

  2.   

    你写的大体不错，我帮你改一个地方就可以了，在FF下是可以的，IE下你自己调一下，一些属性和FF是不同的，有一点区别。
    下面的在FF下已经能正确实现你想要的：<html>
        <head>
            <title>shao hang</title>
            <script>
                function add() {
                    var tr=document.createElement("tr");
                    var td=document.createElement("td");
                    var tablechild=document.createElement("table");
                    var tr1=document.createElement("tr");
                    var td11=document.createElement("td");
                    var text = document.createTextNode("what is that");      //修改
                    td11.appendChild(text);                                  //修改 
                    tr1.appendChild(td11);
                    tablechild.appendChild(tr1);
                    td.appendChild(tablechild);
                    tr.appendChild(td);
                    document.getElementById("list").appendChild(tr);
                }
            </script>
        </head>
        <body>
        <table border="1px">
            <tr height="100px">
                <td>
                    <table>
                        <tr><td>what is that</td></tr>
                    </table>
                </td>
            </tr>
            <tbody id="list"></tbody>
        </table>
    </body>
        <input type="button" onclick="add();">
    </html>
      

  3.   

    你们的都不行啊，结果和我的代码效果都是一样的，点击按钮后增加的是一行高度很低的空行，
    我要的是在IE能实现的。不是FF，
    FF太夸张的，楼上的代码几乎都能在FF上实现效果。
    谁有没有IE的实现方法啊。？？？
      

  4.   

    给你的tr设置个高度就可以了吧
    <html>
        <head>
            <title>shao hang</title>
            <script>
                function add() {
                    var tr=document.createElement("tr");
                    var td=document.createElement("td");
                    var tablechild=document.createElement("table");
                    var tr1=document.createElement("tr");
                    var td11=document.createElement("td");
                    td11.innerText="what is that";
                    tr1.appendChild(td11);
                    tablechild.appendChild(tr1);
                    td.appendChild(tablechild);
                    tr.appendChild(td);
                    tr.height = "100px";
                    document.getElementById("list").appendChild(tr);
                }
            </script>
        </head>
        <body>
        <table border="1px">
            <tbody id="list">
                <tr height="100px">
                <td>
                    <table>
                        <tr><td>what is that</td></tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </body>
        <input type="button" onclick="add();" value="add">
    </html>
      

  5.   

    呵呵,和我以前遇到的问题一样,tr要加到tbody里面
    <html>
        <head>
            <title>shao hang</title>
            <script>
                function add() {
                    var tr=document.createElement("tr");
                    var td=document.createElement("td");
                    var tablechild=document.createElement("table");
                    var tbody = document.createElement("tbody");       //Create the TBODY Tag
                    var tr1=document.createElement("tr");
                    var td11=document.createElement("td");
                    td11.innerText="what is that";
                    tr1.appendChild(td11);
                    tbody.appendChild(tr1);
                    tablechild.appendChild(tbody);
                    td.appendChild(tablechild);
                    tr.appendChild(td);
                    document.getElementById("list").appendChild(tr);
                }
            </script>
        </head>
        <body>
        <table border="1px">
            <tbody id="list">
                <tr height="100px">
                <td>
                    <table>
                        <tr><td>what is that</td></tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </body>
        <input type="button" onclick="add();" value="add">
    </html>
      

  6.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>add</title>
    </head><body>
    <button onclick="add()">add</button>
    <table border="1px">
        <tr>
            <td>
                <table>
                    <tr><td>what is that</td></tr>
                </table>
            </td>
        </tr>
        <tbody id="list"></tbody>
    </table><script type="text/javascript">
    function add()
    {
        var tb = document.getElementById("list");//不知道你要往哪加，我就当往list里面加了
        var row = tb.insertRow();//插入一行，可以在后面加上数字，表示插入到哪个位置
        var cell = row.insertCell();//行里面插入一列
        var table = document.createElement("table");//建立table
        var inner_row = table.insertRow();//新的table里面插入一行
        inner_row.style.height="200px";//设置行高
        var inner_cell = inner_row.insertCell();//新的列
        inner_cell.innerHTML = "test text";//新的列的数据
        cell.appendChild(table);//把新建立的表格，插入到cell里面
    }
    </script>
    </body></html>这样可以吧？新加的行都老高老高了
      

  7.   


    <html>
        <head>
            <title>shao hang</title>
            <script>
                function add() {
                    var tr=document.createElement("tr");
    tr.style.height = "100px";
                    var td=document.createElement("td");
                    var tablechild=document.createElement("table");
    var tbodychild=document.createElement("tbody");
                    var tr1=document.createElement("tr");
                    var td11=document.createElement("td");
    document.getElementById("list").appendChild(tr); //添加元素的顺序要从“大”到"小"，否则会造成内存泄露
                    td11.innerText="what is that";
    tr.appendChild(td);
    td.appendChild(tablechild);
    tablechild.appendChild(tbodychild);
    tbodychild.appendChild(tr1);
                    tr1.appendChild(td11);  
                }
            </script>
        </head>
        <body>
        <table border="1px">
        <tbody id="list">
              <tr height="100px">
                <td>
                    <table>
                        <tr><td>what is that</td></tr>
                    </table>
                </td>
              </tr>
            </tbody>
        </table>
    </body>
        <input type="button" onclick="add();">
    </html>