js HTML中表格的增加和删除

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.οnlοad=function(){
            var otx1=document.getElementById('tx1'); //获取元素
            var otx2=document.getElementById('tx2');//获取元素
            var obn1=document.getElementById('bnt1');//获取元素
            var otab1=document.getElementById('tab1');//获取元素
            var id=otab1.tBodies[0].rows.length;    //创建变量id;
            obn1.οnclick=function(){
              var otr=document.createElement('tr');   //创建一个tr元素;

                var otd=document.createElement('td');  //创建一个td元素;
                otd.innerHTML=id++;         //将id号放入第一个td;
                otr.appendChild(otd);

                var otd=document.createElement('td');
                otd.innerHTML=otx1.value;   //将姓名放入第二个td;
                otr.appendChild(otd);

                var otd=document.createElement('td');
                otd.innerHTML=otx2.value;    //将age放入第三个td;
                otr.appendChild(otd);

                var otd=document.createElement('td');
                otd.innerHTML='<a href="javascript:;">删除</a>';
                otr.appendChild(otd);
                otd.getElementsByTagName('a')[0].οnclick=function(){
                    otab1.tBodies[0].removeChild(this.parentNode.parentNode); //删除tr;
                };

                otab1.tBodies[0].appendChild(otr);
                for(var i=0;i<otab1.tBodies[0].rows.length;i++)

                    if(i%2){
                        otab1.tBodies[0].rows[i].style.background='#ccc';
                    }else{
                        otab1.tBodies[0].rows[i].style.background='';
                    }

            };
        };
    </script>
</head>

<body>
姓名:<input id="tx1" type="text">&nbsp;&nbsp;&nbsp;&nbsp;
age:<input type="text" id="tx2">
<input type="button" value="添加" id="bnt1">
<table id="tab1" border="1" width="500px">
<thead >
  <td>id</td>
  <td>姓名</td>
    <td>age</td>
    <td>操作</td>
<tbody>
<tr>

</tr>

</tbody>
</thead>
</table>
</body>

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值