js实现动态添加表格的行

最新推荐文章于 2023-10-06 19:10:19 发布

努力努力再努力x

最新推荐文章于 2023-10-06 19:10:19 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html+css+js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_15536303/article/details/52141930

html+css+js 专栏收录该内容

3 篇文章

订阅专栏

js实现动态添加表格的行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加表格行</title>
<style type="text/css">
tr {
    width: 89px;
}

th {
    width: 89px;
}
</style>
<script type="text/javascript">
    function $(eleId) {
        return document.getElementById(eleId);
    }
    function addRow() {
        var table = $("table1");
        var row;  //创建表格的行
        row = table.insertRow();
        var cell0 = row.insertCell(0); //创建表格的列
        var cell1 = row.insertCell(1);
        var e1 = document.createElement("input"); 
        e1.type = "text";
        e1.name = "cell1name"
        var e2 = document.createElement("input");
        e2.type = "text";
        e2.name = "cell2name"
        cell0.appendChild(e1);
        cell1.appendChild(e2);
    }
</script>
</head>
<body>

    <form></form>
    <p>购买清单:</p>
    <table id="table1" style="height: 48px; width: 229px" border="1px"
        cellpadding="2" cellspacing="2">
        <thead>
            <tr>
                <th>购买物品</th>
                <th>数量</th>
            </tr>
        </thead>
        <tr>
            <td>U盘</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Q笔</td>
            <td>3</td>
        </tr>
    </table>
    <input type="button" value="添加记录" onclick="addRow()">
</body>
</html>