本站不再更新,欢迎光临 java开发技术网
随笔-230  评论-230  文章-8  trackbacks-0
动态增删表格行列是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 有猫相伴的日子 阅读(1971) 评论(1)  编辑  收藏 所属分类: web-demo

评论:
# re: 动态表格 2013-11-21 16:46 | 434
434  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
本站不再更新,欢迎光临 java开发技术网