js实现动态添加表格的行

js实现动态添加表格的行


<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>2td>
        tr>
        <tr>
            <td>Q笔td>
            <td>3td>
        tr>
    table>
    <input type="button" value="添加记录" onclick="addRow()">
body>
html>

你可能感兴趣的:(html+css+js)