JS之动态TABLE操作

痛定思痛。 2022-07-12 02:22 159阅读 0赞

![20170207163144155][]

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS之动态table操作</title>
    <style>
    #divTable {
    	height: 200;
    	overflow: auto;
    }
    #tab {
    	border: 0px solid black;
    	width: 700;
    	border-collapse: collapse;
    }
    #tab tr {
    	border: 1px solid gray;
    }
    #tab tr td {
    	border: 1px solid #cccccc;
    	padding: 0;
    }
    #yuan {
    	border: 1px solid black;
    	width: 700;
    	border-collapse: collapse;
    }
    #yuan #trHead {
    	background-color: #999999;
    }
    .textAttribute1 {
    	background-color: #CCFF66;
    	width: 40px;
    	text-align: center;
    }
    .textAttribute2 {
    	background-color: #CCFF66;
    	width: 30px;
    }
    .textAttribute3 {
    	width: 40px;
    	text-align: center;
    }
    </style>
    <script language="javascript">
     var TabCtr={
      selectedElements:[], //选择的纪录
      nn:0,     //项号
      cbName:'chk',   //选择框name属性
      selector:false,
      
      //初始化
      init:function(parameters){
       if(parameters.table){
        
        this.tbody = parameters.table.getElementsByTagName("tbody")[0];
       
       }else{
        throw new Error("Need Param:table");
        return;
       }
       if(parameters.cbName)this.cbName = parameters.cbName;
       if(parameters.addRow)this.addRow = parameters.addRow;
      },
      onload:function(){
       //do something..
      },
      onunload:function(){
       this.selectedElements = null;
       //do something..
      },
      
      //选择全部纪录
      selectAll:function(){
       var cbs = document.getElementsByName(this.cbName);
       this.selectedElements.length = 0;
       for(var i = 0; i < cbs.length; i ++){
        cbs[i].checked = this.selector;
        if(this.selector)this.selectedElements[this.selectedElements.length] = cbs[i];
       }
      },
      
      //操作纪录
      selectSingle:function(obj){
       if(obj.checked){
        this.selectedElements[this.selectedElements.length] = obj;
       }else{
        for(var i = 0 ; i < this.selectedElements.length ; i ++){
         if(this.selectedElements[i] == obj){
          this.selectedElements.splice(i,1);
          return;
         }
        }
       }
      },
      //创建动态下拉框
      addSelect:function(){
       this.nn+=1;
       var createSelect = document.createElement("select"); 
       createSelect.id=this.nn;
       createSelect.attachEvent("onchange",function(){TabCtr.chooseSelect(
            createSelect.options[createSelect.options.selectedIndex],
            createSelect);}); 
       //createSelect.appendChild(this.chooseSelect());
       createSelect.add(document.createElement("OPTION"));  
          createSelect.options[0].text="请选择";    
       createSelect.options[0].value=0;
      
       //获取下拉框选项的值
       for(var jjj = 1;jjj<=5;jjj++ ){    
       
        createSelect.add(document.createElement("OPTION")); 
        createSelect.options[jjj].text  = jjj;    
        createSelect.options[jjj].value = jjj; 
       }
       return createSelect;
      },
     
      //增加一行
      addRow:function(){
       var number = this.nn+1;
       var tdArray = new Array();  
       var tr = document.createElement("tr");
       
       for(var tdnum = 0; tdnum<=16; tdnum++){
         tdArray[tdnum] = document.createElement("td");
       }
       tdArray[0].innerHTML = '<input type="checkbox" name="'+this.cbName+'"  οnchange="TabCtr.selectSingle(this);"/>';
       tdArray[0].align="center";
       tdArray[0].width = "20";
       tdArray[1].innerHTML =number;
       tdArray[1].align="center";
       tdArray[1].width = "40";
       tdArray[2].innerHTML = '<input type="text" name="aaa" readonly="true" class="textAttribute1">';
       tdArray[3].appendChild(this.addSelect());
       tdArray[4].innerHTML = '<input type="text" name="bbb" readonly="true" class="textAttribute1">';
       tdArray[5].innerHTML = '<input type="text" name="ccc" readonly="true" class="textAttribute1">';
       tdArray[6].innerHTML = '<input type="text" name="ddd" class="textAttribute1" readonly="true">';
       tdArray[7].innerHTML = '<input type="text" name="eee" class="textAttribute1" readonly="true">'; 
       tdArray[8].innerHTML ='<input type="text" name="qcCount" size="5" οnchange="TabCtr.chooseText(this)">';
       tdArray[9].innerHTML = '<input type="text" name="fff" class="textAttribute2" readonly="true">';
       tdArray[10].innerHTML ='<input type="text" name="ggg" class="textAttribute1" readonly="true">';
       tdArray[11].innerHTML ='<input type="text" name="hhh" class="textAttribute1" readonly="true">';
       tdArray[12].innerHTML ='<input type="text" name="yyy" class="textAttribute1" readonly="true">';
       tdArray[13].innerHTML ='<input type="text" name="jjj" class="textAttribute1" readonly="true">';
       tdArray[14].innerHTML ='<input type="text" name="kkk" class="textAttribute1" readonly="true">';
       tdArray[15].innerHTML ='<input type="text" name="lll" class="textAttribute1" readonly="true">'; 
       tdArray[16].innerHTML ='<input type="text" name="mmm" class="textAttribute1" readonly="true">';
       
       for(var trnum=0;trnum<tdArray.length;trnum++){
        tr.appendChild(tdArray[trnum]);
       }
       this.tbody.appendChild(tr);
       this.scollabc();
      },
       
      //删除一行
      delRow:function(){
       var cbs = document.getElementsByName(this.cbName);
       
       if(cbs.length == 0)return;
       for(var i = 0; i < this.selectedElements.length; i ++){
     
        var tr = this.getTRElement(this.selectedElements[i]);
        if(tr != null){
         tr.parentNode.removeChild(tr);
        }
       }
       this.selectedElements.length = 0;
       document.getElementById("cbSelectAll").checked = false; 
       if(document.getElementsByName(this.cbName).length == 0)
        this.nn = 0;
       
      },
      //按钮控制
      addEvent:function(obj,eventName,handler){
       if(document.all){
        obj.attachEvent("on" + eventName,handler);
       }else{
        obj.addEventListener(eventName,handler,false);
       }
      },
      
      //得到操作对象所在的行对象
      getTRElement:function(obj){
       while(obj.tagName.toLowerCase() != "tr"){
        obj = obj.parentNode;
        if(obj.tagName.toLowerCase() == "body")return null;
       }
       
       return obj;
      },
      
      //得到所操作的行数
      getRowIndex:function(obj){
       var n = 0;
       var currentRow = obj;
       while(currentRow.tagName.toLowerCase() != "tr"){
        currentRow = currentRow.parentNode;
        if(currentRow.tagName.toLowerCase() == "body"){
         throw new Error("error");
         return null;
        }
       }
       while(currentRow.previousSibling ){
       n++;
       currentRow = currentRow.previousSibling ;
       }
       return n; 
      },
      
      //下拉框与输入框联动
      chooseSelect:function(selectObj,trNumber){
         document.getElementsByName("eee")[this.getRowIndex(trNumber)].value=selectObj.text;
         document.getElementsByName("aaa")[this.getRowIndex(trNumber)].value=selectObj.value;
       document.getElementsByName("bbb")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("ccc")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("ddd")[this.getRowIndex(trNumber)].value = selectObj.value; 
       document.getElementsByName("fff")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("ggg")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("yyy")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("jjj")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("kkk")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("lll")[this.getRowIndex(trNumber)].value = selectObj.value;
       document.getElementsByName("mmm")[this.getRowIndex(trNumber)].value = selectObj.value;
      },
      
      //文本框之间联动
      chooseText:function(obj){
       if(obj.value>0){
        var rr = document.getElementsByName("ggg")[this.getRowIndex(obj)].value;
          document.getElementsByName("hhh")[this.getRowIndex(obj)].value = obj.value*rr/10000;
         }
         else{
          alert("数量只能为数字，请重新输入");
         }
      },
      //改变滚动条效果
      scollabc:function(){
       var obj = document.getElementById("divTable");
       var psnObject = obj.Span;
       if(!psnObject){
        psnObject = document.createElement('SPAN');
        obj.Span = psnObject;
       }
       obj.appendChild(psnObject);
       psnObject.scrollIntoView(false);
      }
    
     }
    window.onload = function(){
     TabCtr.init({
      table:document.getElementById("tab")
      /*
      可选参数
      cbname : string (checkbox's name)
      addRow : function (custom addRow)
      */
      });
      TabCtr.addEvent(document.getElementById("cbSelectAll"),
         "click",
         function(){
          TabCtr.selector = document.getElementById("cbSelectAll").checked;
          TabCtr.selectAll();
         }); 
        
      TabCtr.addEvent(document.getElementById("btnAdd"),
         "click",
         function(){TabCtr.addRow();
         });
      TabCtr.addEvent(document.getElementById("btnDel"),
         "click",
         function(){TabCtr.delRow();
         });
      TabCtr.addRow();
      TabCtr.addRow();
      TabCtr.addRow();
     
    }
    </script>
    </head>
    <body>
    <div id="divTable">
      <center>
        JS之动态table操作
      </center>
      <table id="yuan" align="center">
        <tr id="trHead">
          <td align = "center" width="20"><font size="1">全选</font>
          <input type="checkbox" id="cbSelectAll"/></td>
          <td align="center" class="textAttribute3"><font size="2">项号</font></td>
          <td align="center" class="textAttribute3"><font size="2">货号</font></td>
          <td align="center"  width="65"><font size="2">简称</font></td>
          <td align="center" class="textAttribute3"><font size="2">型号</font></td>
          <td align="center" class="textAttribute3"><font size="2">品牌</font></td>
          <td align="center" class="textAttribute3"><font size="2">英名</font></td>
          <td align="center" class="textAttribute3"><font size="2">中名</font></td>
          <td align="center" width="60"><font size="2">数量</font></td>
          <td align="center" class="textAttribute3"><font size="2">单位</font></td>
          <td align="center"  class="textAttribute3"><font size="2">单价</font></td>
          <td align="center" class="textAttribute3"><font size="2">金额</font></td>
          <td align="center" class="textAttribute3"><font size="2">参价</font></td>
          <td align="center" class="textAttribute3"><font size="2">规格</font></td>
          <td align="center" class="textAttribute3"><font size="2">供应</font></td>
          <td align="center" class="textAttribute3"><font size="2">毛重</font></td>
          <td align="center" class="textAttribute3"><font size="2">净重</font></td>
        </tr>
      </table>
      <table id="tab" align="center">
        <tbody>
        </tbody>
      </table>
    </div>
    <table width="700" align="center">
      <tr align="left">
        <td colspan="17"><button id="btnAdd">增加</button>
          <button id="btnDel">删除</button></td>
      <tr>
    </table>
    <body>
    <html>

[20170207163144155]: /images/20220711/70bee6d95ed54f95a31f12e9584be8df.png