关闭

实时增加,删除人员信息表

标签: javascript
97人阅读 评论(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 type="text/javascript">
        //删除按钮的点击事件处理程序
        function btnDeleteHader(currentBtn) {
        //获取当前“删除”按钮所在的行
            var tr = currentBtn.parentNode.parentNode;
            //从Tbody中删除某行
            document.getElementById('tbody1').removeChild(tr);
        }
        window.onload = function () {
            //增加按钮的单击事件
            document.getElementById('btnAdd').onclick = function () {
                //获取用户输入的数据
                var user_name = document.getElementById('txtName').value;
                var user_age = document.getElementById('txtAge').value;
                //获取tbody对象
                var tbodyObj = document.getElementById('tbody1');
                //插入一行
                var currentRow = tbodyObj.insertRow(-1);
                //插入三列
                currentRow.insertCell(-1).innerHTML = user_name;
                currentRow.insertCell(-1).innerHTML = user_age;
                currentRow.insertCell(-1).innerHTML = '<input type="button" onclick="btnDeleteHader(this);" value="删除" />';
            };
        }
    </script>
    <style type="text/css">
    #tbody1 td
    {
        text-align:center;
        }
    </style>
</head>
<body>
    <fieldset style="width:250px;">
        <legend>增加人员信息</legend>
        <p>
            姓名:<input id="txtName"/>
        </p>
        <p>
            年龄:<input id="txtAge"/>
        </p>
        <p>
            <input id="btnAdd" type="button" name="name" value="增加" />
        </p>
    </fieldset>
    <table border="1" cellpadding="2" cellspacing="2" style="width:300px;">
    <caption>人员信息表</caption>
        <thead>
        <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>删除</th>
        </tr>
        </thead>
        <tbody id="tbody1">
        </tbody>
    </table>
</body>
</html>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12482次
    • 积分:342
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类
    文章存档