jQuery创建表格

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建表格</title>
<!-- 定义一些样式,将来给表格用 -->
<style type="text/css">
table{
    border:#0099FF 1px solid;
    width:600px;
    border-collapse:collapse;
}
    
table td{
    border:#0099FF 1px solid;
    padding:10px 20px 3px 1px; 
}
</style>
    <script src="../js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        //创建单行单列的表格
        function createTable(){
            /*$("#tab").append(
             $("<table><tr><td>我是td</td></tr></table>")
             );*/
            //创建表格table元素
            var $tab=$("<table></table>");
            //创建表格tr行元素
            var $tr=$("<tr></tr>");
            //创建td单元格元素
            var $td=$("<td></td>");
            $td.html("一行一列的表格");
            //将td单元格添加到表格行tr上
            $tr.append($td);
            //将tr表格行添加到table表格上
            $tab.append($tr);
            //将创建好的整个table挂载到div上
            $("#tab").append($tab);
            $("#tab").append("<br/>");
        }
        //创建单行6列的表格
        function createTable4(){
            //创建表格table元素
            var $tab=$("<table></table>");
            //创建表格tr行元素
            var $tr=$("<tr></tr>");
            for(var i=0;i<6;i++)
            {
                //创建td单元格元素
                var $td=$("<td></td>");
                $td.html("单元格");
                //将td单元格添加到表格行tr上
                $tr.append($td);
            }
            //将tr表格行添加到table表格上
            $tab.append($tr);
            //将创建好的整个table挂载到div上
            $("#tab").append($tab);
            $("#tab").append("<br/>");
        }

        //创建5行6列的表格
        function createTable2(){
            //创建表格table元素
            var $tab=$("<table></table>");

            for(var j=0;j<5;j++)
            {
                //创建表格tr行元素
                var $tr=$("<tr></tr>");
                for(var i=0;i<6;i++)
                {
                    //创建td单元格元素
                    var $td=$("<td></td>");
                    $td.html("单元格");
                    //将td单元格添加到表格行tr上
                    $tr.append($td);
                }
                //将tr表格行添加到table表格上
                $tab.append($tr);
            }
            //将创建好的整个table挂载到div上
            $("#tab").append($tab);
            $("#tab").append("<br/>");
        }

        //创建指定行和列的表格
        function createTable3(){
            //获取用户所输入的行数
            var rows=$("#row").val();
            //获取用户所输入的列数
            var cols=$("#col").val();
            //创建表格table元素
            var $tab=$("<table></table>");

            for(var j=0;j<rows;j++)
            {
                //创建表格tr行元素
                var $tr=$("<tr></tr>");
                for(var i=0;i<cols;i++)
                {
                    //创建td单元格元素
                    var $td=$("<td></td>");
                    $td.html("单元格");
                    //将td单元格添加到表格行tr上
                    $tr.append($td);
                }
                //将tr表格行添加到table表格上
                $tab.append($tr);
            }
            //将创建好的整个table挂载到div上
            $("#tab").append($tab);
            $("#tab").append("<br/>");
        }

    </script>
</head>
<body>
    <input type="button" value="创建表格" onclick="createTable()" /><br />

    <input type="button" value="创建表格(单行6列)" onclick="createTable4()" /><br />

    <input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br />

    行数:<input type="text" name="row" id="row"/><br />
    列数:<input type="text" name="col" id="col"/><br />
    <input type="button" name="createButton" value="创建表格(行列用户输入)" onclick="createTable3()" />
    <div id="tab">
            
    </div>
</body>
</html>
jQuery创建表格

推荐阅读更多精彩内容
