动态添加报表和删除表格(复制粘贴就可以运行)

动态添加表格和删除表格(复制粘贴就可以运行)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
        table tr{
            height:40px;
        }

    </style>
    <script language="javascript">
function addRow() {
    var tableElement = document.getElementsByTagName("table")[1];
    var trs = tableElement.rows
//alert("tr行数"+trs.length);
/*
//第一种方法
var trElement = document.createElement("tr");
var tdNameElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
tdNameElement.appendChild(tdNameTextNode);

var tdEmailElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("email").value);
tdEmailElement.appendChild(tdNameTextNode);

var tdTelElement = document.createElement("td");
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
tdTelElement.appendChild(tdTelTextNode);

var tdDeleteElement = document.createElement("td");

trElement.appendChild(tdNameElement);
trElement.appendChild(tdEmailElement);
trElement.appendChild(tdTelElement);
trElement.appendChild(tdDeleteElement);

var tbodyElement = tableElement.childNodes;
for (var i = 0; i < tbodyElement.length; i++) {
if (tbodyElement[i].nodeName == "TBODY") {
tbodyElement[i].appendChild(trElement);
}
}*/

//第二种方法
var row = tableElement.insertRow();
//第一个单元格
var nameCell = row.insertCell();
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
nameCell.appendChild(tdNameTextNode);

//第二个单元格
var emailCell = row.insertCell();
var tdEmailTextNode = document.createTextNode(document.getElementById("email").value);
emailCell.appendChild(tdEmailTextNode);

//第三个单元格
var telCell = row.insertCell();
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
telCell.appendChild(tdTelTextNode);

//第四个单元格
var deleteCell = row.insertCell();
deleteCell.innerHTML="<a href='javascript:void(0)' onclick='del(this);'>delete</a>";
}

function del(node) {
//alert(node.parentNode.parentNode.nodeName);
trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}

    </script>
</head>

<body>
        <center>
        <div>添加用户</div>
            <table border="1" width="60%">
            <tr>
                <td>
                    姓名：<input name="name" id="name"/>
                    </td>
                    <td>
                    email:<input name="email" id="email"/>
                    </td>
                    <td>
                    tel:<input name="tel" id="tel"/>
                    </td>
                </tr>
            <tr>
                <td colspan="3">
                    <input type="button" value="提交" onclick="addRow();"/>
                    </td>
                </tr>
            </table>
        <table border="1" width="60%" style="margin-top:50px;">
            <colgroup>
                <col width="20%"/>
                    <col width="30%"/>
                    <col width="30%"/>
                    <col width="20%"/>
                </colgroup>
                <tr height="28px;">
                    <td>姓名</td>
                    <td>email</td>
                    <td>电话</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>1162681603@qq.com</td>
                    <td>15923736935</td>
                    <td><a href="javascript:void(0)" onclick="del(this);">delete</a> </td>
                </tr>

            </table>
        </center>
</body>
</html>

动态添加报表和删除表格(复制粘贴就可以运行)

相关推荐