做错了,贴出来,需要用JQUERY做,现在完全整成DOM和JS做的了
效果图:
代码:
<html> <head> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $("p").click(function() { $(this).hide(); }); }); var flag=true var tb1 = document.createElement("TABLE") function clearNoNum(obj) { //先把非数字的都替换掉,除了数字和. obj.value = obj.value.replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/^\./g,""); //保证只有出现一个.而没有多个. obj.value = obj.value.replace(/\.{2,}/g,"."); //保证.只出现一次,而不能出现两次以上 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); } function addTable(){ if(flag!=false) { flag=false; tb1.id="myTable"; tb1.border="1px"; var row1 = tb1.insertRow(0); var cell1=row1.insertCell(0); var cell2=row1.insertCell(1); var cell3=row1.insertCell(2); var cell4=row1.insertCell(3); var cell5=row1.insertCell(4); var cell6=row1.insertCell(5); var cell7=row1.insertCell(6); document.getElementById("d2").appendChild(tb1); cell1.innerHTML="选项"; cell2.innerHTML="序号"; cell3.innerHTML="编号"; cell4.innerHTML="名称"; cell5.innerHTML="位置"; cell6.innerHTML="数量"; cell7.innerHTML="单价"; row1.insertCell(7).innerHTML="价格"; } } function insRow() { var x=document.getElementById('myTable').insertRow(0) var y=x.insertCell(0) var z=x.insertCell(1) y.innerHTML="NEW CELL1" z.innerHTML="NEW CELL2" } function saveTable() { document.getElementById('myTable').disabled=true; } function editTable() { document.getElementById('myTable').disabled=false; } function createCaption() { var x=document.getElementById('myTable').createCaption() x.innerHTML="我的表格标题" } function insertRow() //增加的一行方法 { newRow=document.all.myTable.insertRow(-1); var j_1 = document.all.myTable.rows.length; newcell=newRow.insertCell(); newcell.innerHTML=""+(j_1-1)+""; newcell=newRow.insertCell() ; newcell.innerHTML="<input type='text' onkeyup='clearNoNum(this)' name='zzkText' />"; newcell=newRow.insertCell() ; newcell.innerHTML="<input type='text' onkeyup='clearNoNum(this)' name='zzkText' />"; newcell=newRow.insertCell() ; newcell.innerHTML="<form><select id='mySelect'><option>库存A</option><option>库存B</option><option>库存C</option></select></form>"; newcell=newRow.insertCell() ; newcell.innerHTML="<input type='text' name='zzkText"+j_1+"' />"; newcell=newRow.insertCell() ; newcell.innerHTML="<input type='text' name='zzkText"+j_1+"' />"; newcell=newRow.insertCell() ; newcell.innerHTML=""+(j_1-1)+""; newcell=newRow.insertCell() ; newcell.innerHTML="<input type='checkbox' name='mycheck' />"; document.all.myTable.focus(); } function deleteRow() { var ok=document.getElementsByName("mycheck"); for(var k=0;k<ok.length;k++) { if(ok[k].checked==true) { tb1.deleteRow(k+1); k=k-1; } } } </script> </head> <body> <p>如果你点击我,我就消失</p> </br> <div id="d1"> <input type="button" value="创建" onclick="addTable()"> <input type="button" value="添加" onclick="insertRow()"> <input type="button" value="删除" onclick="deleteRow()"> <input type="button" value="保存" onclick="saveTable()"> <input type="button" value="编辑" onclick="editTable()"> <input type="button" value="复制"> <input type="button" onclick="createCaption()" value="创建标题"> </div> <div id="d2"> </div> <div id="d3"> </div> </body> </html>