JS之動(dòng)態(tài)TABLE操作

2024-04-27 15:11:37

字體：大中小

供稿：網(wǎng)友

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS之動(dòng)態(tài)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:[], //選擇的紀(jì)錄  nn:0,     //項(xiàng)號(hào)  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..  },    //選擇全部紀(jì)錄  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];   }  },    //操作紀(jì)錄  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;     }    }   }  },  //創(chuàng)建動(dòng)態(tài)下拉框  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="請(qǐng)選擇";       createSelect.options[0].value=0;     //獲取下拉框選項(xiàng)的值   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+'"  onchange="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" onchange="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);   }  },    //得到操作對(duì)象所在的行對(duì)象  getTRElement:function(obj){   while(obj.tagName.toLowerCase() != "tr"){    obj = obj.parentNode;    if(obj.tagName.toLowerCase() == "body")return null;   }      return obj;  },    //得到所操作的行數(shù)  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;   },    //下拉框與輸入框聯(lián)動(dòng)  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;  },    //文本框之間聯(lián)動(dòng)  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("數(shù)量只能為數(shù)字，請(qǐng)重新輸入");     }  },  //改變滾動(dòng)條效果  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")  /*  可選參數(shù)  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之動(dòng)態(tài)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">項(xiàng)號(hào)</font></td>      <td align="center" class="textAttribute3"><font size="2">貨號(hào)</font></td>      <td align="center"  width="65"><font size="2">簡(jiǎn)稱</font></td>      <td align="center" class="textAttribute3"><font size="2">型號(hào)</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">數(shù)量</font></td>      <td align="center" class="textAttribute3"><font size="2">單位</font></td>      <td align="center"  class="textAttribute3"><font size="2">單價(jià)</font></td>      <td align="center" class="textAttribute3"><font size="2">金額</font></td>      <td align="center" class="textAttribute3"><font size="2">參價(jià)</font></td>      <td align="center" class="textAttribute3"><font size="2">規(guī)格</font></td>      <td align="center" class="textAttribute3"><font size="2">供應(yīng)</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>

上一篇：&lt;iframe&gt;&lt;/iframe&gt;

下一篇：extjs datefield的readOnly屬性