怎么利用javascript外部文件制作表格？

难道是用document.write()来写HTML中的
<table>
    <tr>
      <td></td>
    </tr>
</table>
吗 ？是写在一个document.write()里面，还是写在许多个document.write()里面？
具体应该怎么做呢？

解决方案 »

  1.   

    都行    js里字符换行  \
    <script type=...>document.write('<table..........');
    document.write('<tr><td..........');
    document.write('</td></tr>\
    <tr>\
    <td>\
    内容.....................\
    </td>\
    </td>');
    </script>
      

  2.   

    不能这样写，要用js创建动态创建table标签，具体你可以查一下
      

  3.   

    table的话，有特殊性，IE6,7不支持W3C提供的DOM，appendChild和insertBefore，所以只能用DHTML标准insertRow 和insertCell完成
    第一种方法:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function insRow()
    {
    var tbl = document.getElementById('myTable');
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML="new cell";
    }
    </script>
    </head> <body>
    <table id="myTable" border="1">
    <tr>
    <td>
    cell
    </td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="insRow()" value="Insert row">
    </body>
    </html>
      

  4.   

    哦，上面写的不是很完整，IE6,7不支持table.appendChild....其他Dom都支持。此外，DOM法比DHTML效率更高第二种方法<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Insert title here</title><script type="text/javascript">
    function init() {

    var table = document.createElement('table');

    var tr = table.insertRow(0);
    var td = document.createElement('td');
    var text = document.createTextNode('12345');
    td.appendChild(text);
    tr.appendChild(td);

    document.body.appendChild(table);
    }
    </script>
    </head>
    <body onload="init();">

    </body>
    </html>
    将能用DOM的都用了DOM
      

  5.   

    第三种方法可以用DOM动态生成DIV，SPAN，用DIV去拼接成表格。全浏览器支持。常用于无边框的表格或者表格中每行的列数不一样的场合。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Insert title here</title>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
    function init() {

    var row = createElement('DIV'); var cell = createElement('SPAN', null, {
    display: 'inline-block',
    width: '100px',
    height: '30px',
    borderStyle: 'solid',
    borderWidth: '1px'
    });

    row.appendChild(cell);
    var row1 = createElement('DIV');
    var cell2 = createElement('SPAN', null, {
    display: 'inline-block',
    width: '100px',
    height: '30px',
    lineHeight: '30px',
    borderStyle: 'solid',
    borderWidth: '1px',
    textAlign: 'center'
    });

    row1.appendChild(cell2);
    createTextNode('TEST', cell2);
    document.getElementById('container').appendChild(row);
    document.getElementById('container').appendChild(row1);
    }
    </script>
    </head>
    <body onload="init();">
    <div id="container"></div>
    </body>
    </html>
    test.js
    function createElement(tagName, tagProp, tagStyle) {
    var element = document.createElement(tagName);

    if (tagProp) {
    for (var prop in tagProp) {
    element[prop] = tagProp[prop];
    }
    }

    if (tagStyle) {
    for (var prop in tagStyle) {
    element.style[prop] = tagStyle[prop];
    }
    }
    return element;
    }function createTextNode(text, parentNode) {
    parentNode.appendChild(document.createTextNode(text));
    return parentNode;
    }
    缺点:需要对css有一定了解