738
我用JS寫的一段創建TABLE，添加行，模煳匹配，根據CHECKBOX刪除內容，創建標題的代碼（刪除完再添加行有計數器的BUG）
做錯了，貼出來，需要用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.;
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 >
<input type="button" value="創建" >
<input type="button" value="添加" >
<input type="button" value="刪除" >
<input type="button" value="保存" >
<input type="button" value="編輯" >
<input type="button" value="複製">
<input type="button" value="創建標題">
</div>
<div >
</div>
<div >
</div>
</body>
</html>
最後更新：2017-04-02 22:16:36