js 自增table （练习）

最新推荐文章于 2023-11-22 14:01:45 发布

虽然我也不太懂

最新推荐文章于 2023-11-22 14:01:45 发布

阅读量810

点赞数

分类专栏：旧时文章-2012

本文链接：https://blog.csdn.net/Byemyloveing/article/details/8453745

版权

旧时文章-2012 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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>