js动态生产table、Div、select.doc

js动态生产table、Div、select一种方法：js操作表格/*生成表格，采用appendChild*/function init() _table=document.getElementById(table);_table.border=1px;_table.width=800px; for(var i=1;i10;i+) var row=document.createElement(tr); row.id=i; for(var j=1;j6;j+) var cell=document.createElement(td); cell.id=i+/+j; cell.appendChild(document.createTextNode(第+cell.id+列); row.appendChild(cell); document.getElementById(newbody).appendChild(row); function rebulid() var beginRow=document.getElementById(beginRow).value;/*开始行*/var endRow=document.getElementById(endRow).value;/*结束行*/var beginCol=document.getElementById(beginCol).value;/*开始列*/var endCol=document.getElementById(endCol).value;/*结束列*/ var tempCol=beginRow+/+beginCol;/*定位要改变属性的列*/alert(tempCol);var td=document.getElementById(tempCol);/*删除要合并的单元格*/for(var x=beginRow;x=endRow;x+) for(var i=beginCol;i=endCol;i+) if(x=beginRow) document.getElementById(table).rowsx.deleteCell(i+1); else document.getElementById(table).rowsx.deleteCell(i); td.rowSpan=(endRow-beginRow)+1;/*添加行，使用appendChild方法*/function addRow() var length=document.getElementById(table).rows.length; /*document.getElementById(newbody).insertRow(length); document.getElementById(length+1).setAttribute(id,length+2);*/ var tr=document.createElement(tr); tr.id=length+1; var td=document.createElement(td); for(i=1;i4;i+) td.id=tr.id+/+i;td.appendChild(document.createTextNode(第+td.id+列);tr.appendChild(td); document.getElementById(newbody).appendChild(tr); function addRow_withInsert() var row=document.getElementById(table).insertRow(document.getElementById(table).rows.length);var rowCount=document.getElementById(table).rows.length;var countCell=document.getElementById(table).rows.item(0).cells.length; for(var i=0;icountCell;i+) var cell=row.insertCell(i); cell.innerHTML=新+(rowCount)+/+(i+1)+列; cell.id=(rowCount)+/+(i+1); /*删除行，采用deleteRow(row Index)*/function removeRow()/* var row=document.getElementById(2); var index=row.rowIndex; alert(index);*/ document.getElementById(newbody).deleteRow(document.getElementById(document.getElementById(table).rows.length).rowIndex); /*添加列，采用insertCell(列位置)方法*/function addCell()/*document.getElementById(table).rows.item(0).cells.length用来获得表格的列数*/ for(var i=0;idocument.getElementById(table).rows.length;i+) var cell=document.getElementById(table).rowsi.insertCell(2); cell.innerHTML=第+(i+1)+/+3+列; /*删除列，采用deleteCell(列位置)的方法*/function removeCell()for(var i=0;idocument.getElementById(table).rows.length;i+) document.getElementById(table).rowsi.deleteCell(0); 从第行到行从第列到列第二种：aavar abc=class: newDivClass, id: newDiv, name: newDivName;alert(abcclass);function aaa()/传统的方式来动态添加一个DIV var newElement = document.createElement(div); var newText = document.createTextNode(这是新建立 div 中的文字。); document.getElementById(mydiv).appendChild(newElement); /漏了这一句，否则行不通 newElement.id = newDiv; newElement.className = newDivClass; newElement.setAttribute(name ,newDivName); newElement.style.width = 300px; newElement.style.height = 200px; newElement.style.margin = 0 auto; newElement.style.border = 1px solid #DDD; newElement.appendChild(newText); /$(function()alert(asdf););var i=0;function clickme()/动态添加TABLE内容 i+; var tbl=document.getElementById(tb); var row=tbl.insertRow(tbl.rows.length); var cell1=row.insertCell(row.cells.length); var cell2=row.insertCell(row.cells.length); var cell3=row.insertCell(row.cells.length); var cell4=row.insertCell(row.cells.length); cell1.innerHTML=a+i; cell2.innerHTML=b+i; cell3.innerHTML=c+i; cell4.innerHTML=delete; cell1.setAttribute(width,150px); cell2.setAttribute(width,150px); cell3.setAttribute(width,150px); cell4.setAttribute(width,150px); /row.style.setAttribute(backgroundColor,#e0e0e0); row.stylebackgroundColor=#e0e0e0; /第二种设置样式的方法 tbl.style.setAttribute(backgroundColor,olive); tbl.setA(width,500px); /alert(row.stylebackgroundColor);function leo()/重定下标 var tbl=document.getElementById(tb); for(var k=0;ktbl.rows.length;k+) tbl.rowsk.cells3.innerHTML=delete; function deleteRow(obj)/删除指定的行 var tbl=document.getElementById(tb); tbl.deleteRow(obj); leo(); function clickme2()/用古老的方式向层里添加内容 var my=document.getElementById(mydiv); /alert(my); my.innerHTML=$(#mydiv).html()+zhaosheng; /my.appendChild(zhaosheng);var k=0;function createSelect()/为SELECT、动态添加项 document.getElementById(sel).optionsdocument.getElementById(sel).options.length = new Option(optionName+k,optionValue+k); k+;function change(obj)/select change function alert(obj.value);function common(type,attr,style,html) var element=document.createElement(type); document.body.appendChild(element); for(var k in attr) element.setAttribute(k,attrk); for(var k in style) element.stylek=stylek; element.appendChild(document.createTextNode(html); function commontest() var attr=name:myname,id:myid; var style=width:500px,height:400px,border:1px solid purple; var html=this is my text; common(div,attr,style,html);commontestaaaclickme id name age operate clickme2createSelect第三种： !- function insertTable() var table = document.allListTable; /写入行var objRow = table.insertRow();objRow.height = 22;objRow.bgColor = #ffffff;objRow.align = center;objRow.onmousedown = function() GetRow(this); ;/序号var objCel = objRow.insertCell(0);objCel.align = center;objCel.innerHTML = 1;objCel.style.setAttribute(border-bottom,#000000 2px solid);objCel.style.setAttribute(border-right,#000000 2px solid);/商品编码var objCel = objRow.insertCell(1);objCel.align = center;objCel.innerHTML = SP00000781;/商品名称var objCel = objRow.insertCell(2);objCel.align = left;objCel.innerHTML = 矿区水;/单位var objC