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

原创 2016年08月29日 15:58:09
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

java连接mysql增加人员信息

首先一个登陆页面代码如下 String action=(String)request.getAttribute("action"); String id=(String)request...

人员信息表

  • 2017年08月15日 09:23
  • 252KB
  • 下载

互联网新闻信息服务单位内容管理从业人员管理办法(全文)

互联网新闻信息服务单位内容管理 从业人员管理办法 第一章 总则 第一条 为加强对互联网新闻信息服务单位内容管理从业人员(以下简称“从业人员”)的管理,维护从业人员和社会公众的合法...
  • TO7A0Yc
  • TO7A0Yc
  • 2017年10月30日 00:00
  • 24

hash表创建人员信息

  • 2012年05月16日 23:26
  • 3KB
  • 下载

习大大反腐火已烧到技术出身人员——多个信息中心干部被查

习大大反腐火已烧到技术出身人员——多个信息中心干部被查 省出入境检验检疫局信息中心曝腐败窝案   广州日报讯 (记者章程)昨日,广州市天河区检察院公布了对一批职务犯罪的查处情况,其中最为集中的是多个...

实时信息统计图表

  • 2011年12月23日 14:42
  • 32KB
  • 下载

信息图:营销人员应该知道的邮件发送黄金时间段

随着国内邮件营销的关注热度逐渐升温,市场营销人员开始把注意力投射到邮件发送的各个细节中。影响邮件打开率的因素甚多,不仅包括了是否吸睛的标题、个性化的内容、清晰的排版等,另外,邮件发送时间点也是极其重要...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实时增加,删除人员信息表
举报原因:
原因补充:

(最多只允许输入30个字)