动态增删表格行列是Ajax处理的常用代码,下面对其过程进行了一些分析和总结.
通过Dom解析到某个表格,表格必须符合W3C标准,即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑体部分是必须的.
先看怎么解析到这个表格:
var folderList=document.getElementById("folderList");
再这样解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
这下删除就好办了,直接这样:
folderList.removeChild(rowWillDelete);
要增加的话,需要创建出一行tr,下面是创建过程
var row=document.createElement("tr");// 创建tr
row.setAttribute("id",newFolderName);// 设置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 创建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 将td添加到tr
将tr增加到table可以这样:
document.getElementById("folderList").appendChild(row);
在td中增加什么内容可以根据情况设定,下面代码就加了自删除的按钮:
var deleteButton=document.createElement("input");// 创建input控件
deleteButton.setAttribute("type","button");// 设定input控件的类型为按钮
deleteButton.setAttribute("value","delete");// 设定按钮的显示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 这句很关键,这是按钮的事件处理,可以看到点击此按钮时会交给deleteFromFolderList处理
cell=document.createElement("td");// 这句上面说了
cell.appendChild(deleteButton);// 这句上面也说了
整个过程基本就这样,特别提醒的是书写js代码一要注意规范,二要细心调试,否则容易给自己带来麻烦.
动态增删表格行列是Ajax处理的常用代码,下面对其过程进行了一些分析和总结.
通过Dom解析到某个表格,表格必须符合W3C标准,即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑体部分是必须的.
先看怎么解析到这个表格:
var folderList=document.getElementById("folderList");
再这样解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
这下删除就好办了,直接这样:
folderList.removeChild(rowWillDelete);
要增加的话,需要创建出一行tr,下面是创建过程
var row=document.createElement("tr");// 创建tr
row.setAttribute("id",newFolderName);// 设置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 创建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 将td添加到tr
将tr增加到table可以这样:
document.getElementById("folderList").appendChild(row);
在td中增加什么内容可以根据情况设定,下面代码就加了自删除的按钮:
var deleteButton=document.createElement("input");// 创建input控件
deleteButton.setAttribute("type","button");// 设定input控件的类型为按钮
deleteButton.setAttribute("value","delete");// 设定按钮的显示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 这句很关键,这是按钮的事件处理,可以看到点击此按钮时会交给deleteFromFolderList处理
cell=document.createElement("td");// 这句上面说了
cell.appendChild(deleteButton);// 这句上面也说了
整个过程基本就这样,特别提醒的是书写js代码一要注意规范,二要细心调试,否则容易给自己带来麻烦.
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
有猫相伴的日子 阅读(1983)
评论(1) 编辑 收藏 所属分类:
web-demo