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

<!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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Sunqlive/article/details/52353894
文章标签: javascript
个人分类: js
上一篇js 页面上有五个checkbox按钮,以及一个textbox文本框。当勾选文本框时textbox文本框内的内容显示为当前勾选了几个checkbox,并且显示相应的checkbox文本内容。
下一篇jquery 制作评分控件
想对作者说点什么? 我来说一句

人员信息

2017年08月15日 252KB 下载

实时信息统计图表

2011年12月23日 32KB 下载

没有更多推荐了,返回首页

关闭
关闭