Jquery动态生成table

最新推荐文章于 2023-07-11 17:42:04 发布

风若寒89

最新推荐文章于 2023-07-11 17:42:04 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/zhao8912/article/details/17267899

版权

<!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>
    <title></title>
    <script src="../JS/jquery-1.7.min.js" type="text/javascript"></script>
     <script type="text/javascript">
        function CreateNewTabel() {
            $("#createtable").html(""); //每次先清空
            var varName = new Array();
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            varName.push("1");
            var table = $("<table   class=\"table\" align=\"center\" width=\"600px\">");
            table.appendTo($("#createtable")); //在id是createtable的后边加table
            var Count = Math.ceil(varName.length / 6); //取整
            for (var i = 0; i < Count; i++) {
                if (i % 2 == 0) {//奇偶行样式
                    var tr = $("<tr class=\"td3\"></tr>");
                } else {
                    var tr = $("<tr class=\"td1\"></tr>");
                }
                tr.appendTo(table);
                //开始for
                for (j = 0; j < 6; j++) {//这种就包括所有的情况了
                    if (i * 6 + j == varName.length) {
                        break;
                    }
                    var td = $("<td class=\"biaoge4\" width=\"100px\">" + varName[i * 6 + j]+ "</td>");
                    td.appendTo(tr);
                }
                // 结束for
            }
            // 结束for
            $("#createtable").append("</table>");
        }
    </script>
</head>
<body>
  <div>
        <input type="button" value="生成table" οnclick="CreateNewTabel()" />
        <div id="createtable">
        </div>
    </div>
</body>
</html>

风若寒89

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery动态生成table

function CreateNewTabel() { $("#createtable").html(""); //每次先清空 var varName = new Array(); varName.push("1"); varName.push("1"); varNam
复制链接

扫一扫