動(dòng)態(tài)增刪表格行列是Ajax處理的常用代碼,下面對(duì)其過程進(jìn)行了一些分析和總結(jié).
通過Dom解析到某個(gè)表格,表格必須符合W3C標(biāo)準(zhǔn),即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑體部分是必須的.
先看怎么解析到這個(gè)表格:
var folderList=document.getElementById("folderList");
再這樣解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
這下刪除就好辦了,直接這樣:
folderList.removeChild(rowWillDelete);
要增加的話,需要?jiǎng)?chuàng)建出一行tr,下面是創(chuàng)建過程
var row=document.createElement("tr");// 創(chuàng)建tr
row.setAttribute("id",newFolderName);// 設(shè)置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 創(chuàng)建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 將td添加到tr
將tr增加到table可以這樣:
document.getElementById("folderList").appendChild(row);
在td中增加什么內(nèi)容可以根據(jù)情況設(shè)定,下面代碼就加了自刪除的按鈕:
var deleteButton=document.createElement("input");// 創(chuàng)建input控件
deleteButton.setAttribute("type","button");// 設(shè)定input控件的類型為按鈕
deleteButton.setAttribute("value","delete");// 設(shè)定按鈕的顯示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 這句很關(guān)鍵,這是按鈕的事件處理,可以看到點(diǎn)擊此按鈕時(shí)會(huì)交給deleteFromFolderList處理
cell=document.createElement("td");// 這句上面說了
cell.appendChild(deleteButton);// 這句上面也說了
整個(gè)過程基本就這樣,特別提醒的是書寫js代碼一要注意規(guī)范,二要細(xì)心調(diào)試,否則容易給自己帶來麻煩.
動(dòng)態(tài)增刪表格行列是Ajax處理的常用代碼,下面對(duì)其過程進(jìn)行了一些分析和總結(jié).
通過Dom解析到某個(gè)表格,表格必須符合W3C標(biāo)準(zhǔn),即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑體部分是必須的.
先看怎么解析到這個(gè)表格:
var folderList=document.getElementById("folderList");
再這樣解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
這下刪除就好辦了,直接這樣:
folderList.removeChild(rowWillDelete);
要增加的話,需要?jiǎng)?chuàng)建出一行tr,下面是創(chuàng)建過程
var row=document.createElement("tr");// 創(chuàng)建tr
row.setAttribute("id",newFolderName);// 設(shè)置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 創(chuàng)建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 將td添加到tr
將tr增加到table可以這樣:
document.getElementById("folderList").appendChild(row);
在td中增加什么內(nèi)容可以根據(jù)情況設(shè)定,下面代碼就加了自刪除的按鈕:
var deleteButton=document.createElement("input");// 創(chuàng)建input控件
deleteButton.setAttribute("type","button");// 設(shè)定input控件的類型為按鈕
deleteButton.setAttribute("value","delete");// 設(shè)定按鈕的顯示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 這句很關(guān)鍵,這是按鈕的事件處理,可以看到點(diǎn)擊此按鈕時(shí)會(huì)交給deleteFromFolderList處理
cell=document.createElement("td");// 這句上面說了
cell.appendChild(deleteButton);// 這句上面也說了
整個(gè)過程基本就這樣,特別提醒的是書寫js代碼一要注意規(guī)范,二要細(xì)心調(diào)試,否則容易給自己帶來麻煩.
function sellsect_countChange(){
var new_sellsect_count=document.all("sellsect_count").value;
var tab=document.all('small5');
var trrowcount=tab.rows.length;
while(trrowcount>1){
trrowcount=trrowcount-1;
tab.deleteRow(trrowcount);
}
//添加表格
for(var i=1;i<=new_sellsect_count;i++) {
newrow=tab.insertRow(tab.rows.length);
var cell1=document.createElement("td");
//cell1.setAttribute("bgcolor","#f5f5f5");
cell1.bgcolor="#f5f5f5";
cell1.appendChild(document.createTextNode("銷售段"+i));
var cell2=document.createElement("td");
//cell2.style="bgcolor:#ffffff";
cell2.setAttribute("bgcolor","#ffffff");
var input1=document.createElement("input");
input1.setAttribute("type","text");
input1.setAttribute("size","10");
//input1.setAttribute("ID","seg_start_"+i);
input1.name="seg_start_"+i;
//input1.value="11"
cell2.appendChild(input1);
var cell3=document.createElement("td");
cell3.setAttribute("bgcolor","#f5f5f5");
cell3.appendChild(document.createTextNode("至"));
var cell4=document.createElement("td");
cell4.setAttribute("bgcolor","#ffffff");
var input2=document.createElement("input");
input2.setAttribute("type","text");
input2.setAttribute("size","10");
input2.setAttribute("ID","seg_end_"+i);
cell4.appendChild(input2);
if(i==1){
newrow.appendChild(cell1);
newrow.appendChild(cell2);
}else if(i==new_sellsect_count){
newrow.appendChild(cell1);
newrow.appendChild(cell4);
}else{
newrow.appendChild(cell1);
newrow.appendChild(cell2);
newrow.appendChild(cell3);
newrow.appendChild(cell4);
}
}
var endtr=tab.insertRow(tab.rows.length);
endtr.setAttribute("align","center");
var cellend=document.createElement("td");
cellend.setAttribute("colspan","4");
cellend.setAttribute("bgcolor","#f5f5f5");
var btn_ok=document.createElement("input");
btn_ok.setAttribute("name","btn_ok");
btn_ok.setAttribute("type","button");
btn_ok.setAttribute("value","確定");
btn_ok.onclick=function(){select_SellSect();};
cellend.appendChild(btn_ok);
endtr.appendChild(cellend);
}
參考例子
posted on 2007-12-05 14:53
有貓相伴的日子 閱讀(1995)
評(píng)論(1) 編輯 收藏 所屬分類:
web-demo