如何使用JavaScript创建一个动态表格

Question

点一下button创建一个3X4的表格，用js编写

Answer 1

// 你的 HTML 的 body 中添加如下内容
// 一个 div 用来放生成的 table ； 一个按钮执行 create 
// <div id="div"></div> 
// <input type="button" onclick="create()" /> 

// 以下是 js 方法
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function create() {
        // 使用 $("<table></table>") 生成一个 table
        var tab = $("<table border='1'></table>");
        // 3 行循环3次
        for (var i = 1; i <= 3; i++) {
            // 每次生成一个 <tr></tr>
            var row = $("<tr></tr>");
            // 4 列循环 4 次
            for (var j = 1; j <= 4; j++) {
                // 给 <tr></tr> append（添加）  <td>i行j列</td>
                row.append($("<td>" + i + "行" + j + "列" + "</td>"));
            }
            // 给 <table></table> 每次循环添加上边的 <tr>****</tr>
            tab.append(row);
        }
        // 最后把生成的 <table>***</table> 放到 id=div 的控件中
        $("#div").append(tab);
    }
</script>

Answer 2

<script type="text/javascript">
function createtab(){
tabstr="<table border='1' >";
tabstr=tabstr+"<tr align='center'><td rowspan='3' width=10%>月份</td><td rowspan='3' width=10%>专业</td><td colspan='6' width=80%>
广告业务宣传资源</td></tr>";
tabstr=tabstr+"<tr align='center'><td colspan='2' width=20%>营销活动</td><td colspan='2' width=20%>预测依据</td><td width=20%>预测
费用</td><td rowspan='2' width=20%>实际执行费用</td></tr>";
tabstr=tabstr+"<tr align='center'><td width=10%>名称</td><td width=10%>主要内容</td><td width=10%>数量</td><td width=10%>标准
</td><td>单元格需能体现逻辑公式</td><td></td></tr>";
tabstr=tabstr+"<tr align='center'><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td></td></tr>";
tabstr=tabstr+"</table>";
document.write(tabstr);
}
createtab();
</script>