jquery动态添加table和行

最新推荐文章于 2022-12-31 10:35:43 发布

wym3587

最新推荐文章于 2022-12-31 10:35:43 发布

阅读量1.5w

点赞数

分类专栏： JS 文章标签： table jquery button border function xhtml

本文链接：https://blog.csdn.net/wym3587/article/details/7790966

版权

JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function CreateTable(rowCount, cellCount) {
            var table = $("<table border='1px'>");
            table.appendTo($('#createtable'));
            for (var i = 0; i < rowCount; i++) {
                var tr = $("<tr></tr>");
                tr.appendTo(table);
                for (var j = 0; j < cellCount; j++) {
                    var td = $("<td>" + i * j + "</td>");
                    td.appendTo(tr);
                }
            }
            tr.appendTo(table);
            $('#createtable').append(table);
        }
        function CreateRow() {
            var $table = $('#table1');
            var tr = "<tr><td>1</td><td>2</td><td>3</td></tr>";
            $table.append(tr);
        }
    </script>
</head>
<body>
<input type="button" value="添加表格" οnclick="CreateTable(5,6)" />
<input type="button" value="添加行" οnclick="CreateRow()" />
<div id="createtable"></div>
<div id="createrow">
<table id="table1" border="1" >
    <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</body>
</html>