js 自增table (练习)

<html>

<head>

<title></title>
<script>
//table自增表
//这段代码编写的目的,仅仅作为js练习和总结而已,代码很多地方写的多余和臃肿,
//设计的不是很合理,在实际应用中,根据具体需求而定
function addNum(){
 this.name = "addNum";
    this.brothersLength ;//兄弟节点的长度
    this.itselfNode ;//当前自身td
    this.upperNode;//table节点
    this.brothersNodes; //兄弟节点
    this.appendNodes ; //新增节点 
    this.deleteButton; //删除按钮
    this.deleteTrNode = function(obj){
   //alert(this.name)
     this.upperNode.removeChild(obj.parentNode.parentNode)
    }
}
addNum.prototype.init = function(){
    this.itselfNode = event.srcElement;
    this.brothersNodes = this.itselfNode.parentNode.parentNode.childNodes ;
    this.brothersLength = this.brothersNodes.length;
    this.upperNode = this.itselfNode.parentNode.parentNode.parentNode;//table 
    this.appendNodes = document.createElement("tr"); //新增tr节点
 this.appendNodes.name = "newTr";
    this.deleteButton =document.createElement("input");//name='del' value='[-]' type='button'
    this.deleteButton.name = 'del';
    this.deleteButton.value = '[-]';
    this.deleteButton.type = 'button';
    itself = this;//this 引用
    this.deleteButton.onclick = function(){
        itself.deleteTrNode(this);//这里的this指向当前button对象
    } ;
 //this.deleteButton.attachEvent('onclick',function(){itself.deleteTrNode(this);}) //attachEvent中this指向是当前对象
}

addNum.prototype.addBrothersNodesNoValue = function(){
    this.init();
    for(var i = 0 ; i<this.brothersLength ; i++){
        appendNode= this.brothersNodes[i].cloneNode(true);//clone节点所有内容和属性
        itselfChildNodes = appendNode.childNodes ;
        for(j=0;j<itselfChildNodes.length;j++){
            if(("INPUT"==itselfChildNodes[j].nodeName) && ("text"==itselfChildNodes[j].type)){ //
                itselfChildNodes[j].value = "";
            }          
        }
        if(i == this.brothersLength-1){ 
        
           while(appendNode.firstChild){ //等价于itselfChildNodes.length > 0
               appendNode.removeChild(appendNode.firstChild)
            }  
            appendNode.appendChild(this.deleteButton) ;
        }
        this.appendNodes.appendChild(appendNode);//新增tr节点
        
    }
    this.upperNode.appendChild(this.appendNodes); 
}

var autoAdd = new addNum();

</script>
</head>

<body>
 <table border="1" name="tabv">
  <tr name="trv">
   <td width="15" height="25" name="ta1">1<input type="text" value="1"/></td>
   <td width="15" name="ta2">2<input type="text" value="2"/></td>
   <td width="15" name="ta3">3<button>newBUTTON_1</button></td>
   <td width="15" name="ta4">4<button>newBUTTON_1</button></td>
   <td name="btTd""><button name="1" οnclick="autoAdd.addBrothersNodesNoValue()">[+]</button></td>
  </tr>
 </table>
</body>
</html>




 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值