注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

JS技术,table终极操作!  

2012-11-14 22:42:31|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

    
<title>Untitled Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<script language="javascript" type="text/javascript">
<!--
  
  
//创建表格
  var table_node=document.createElement("table");
  
//创建TBody
  var tbody_node=document.createElement("tbody");
  
function ButtonCreatTable_onclick() 
{
  
//得到 行 和 列
  var rows=parseInt(document.getElementById("Text_row").value);
  
var cols=parseInt(document.getElementById("Text_columns").value);
  
//得到 Div  id="tableAppear" 
  var table_div=document.getElementById("tableAppear");

  table_div.appendChild(table_node);
  
  tbody_node.id
="tablebody";
  table_node.appendChild(tbody_node);
  
// loop to add all the <tr>
  for(var row_index=1;row_index<=rows;row_index++)
  
{
    
var tr_node=document.createElement("tr");
    tbody_node.appendChild(tr_node);
    
for(var col_index=1;col_index<=cols;col_index++)
    
{
       
var td_node=document.createElement("td");
       tr_node.appendChild(td_node);
       
var td_text=document.createTextNode("Row: "+row_index+"  Col: "+col_index);
       td_node.appendChild(td_text);
    }

  }

}


function innser_Tr() 
{  
   
if(document.getElementById("tableAppear").hasChildNodes())  //有孩子
   {   var reference_row=parseInt(document.getElementById("Text_insert").value);
       
var reference_node=tbody_node.childNodes[reference_row-1];
       
var new_tr_node=document.createElement("tr");
       
var insert_node=tbody_node.insertBefore(new_tr_node,reference_node);
       
var cols=reference_node.childNodes.length;
       
for(var col_index=1;col_index<=cols;col_index++)
       
{
               
var td_node=document.createElement("td");
               new_tr_node.appendChild(td_node);
               
var td_text=document.createTextNode("Row: "+reference_row+"  Col: "+col_index);
               td_node.appendChild(td_text);
       }

   }

     
else
        alert(
"请点击创建表格!");
   
}


function ButtonReplace_onclick() 
{    
      
if(document.getElementById("tableAppear").hasChildNodes())  //有孩子
      {
         
var cloneTable=table_node.cloneNode(true); //复制表格
         var reptable=document.getElementById("replaceTable");
         document.getElementById(
"replaceDiv").replaceChild(cloneTable,reptable); //替换到当前位置
      
      }

      
else
        alert(
"请点击创建表格!");
}


function ButtonDel_onclick()  
{
    
if(document.getElementById("tableAppear").hasChildNodes())
    
{
        
var delrow=parseInt(document.getElementById("Text_del").value);
        
var del_node=tbody_node.childNodes[delrow-1];
        tbody_node.removeChild(del_node);
    }

    
else
        alert(
"请点击创建表格!");
}


// -->
</script>
</head>
<body>
<form id="from1">
    
<input id="ButtonCreat" style="width: 148px" type="button" value="创建表格" onclick="ButtonCreatTable_onclick()" />
    行:
    
<input id="Text_row" type="text"  value="2"/>
    列:
    
<input id="Text_columns" type="text"  value="3"/>
    
<br />
    
<br />
    表格出现在这里:
<br />
    
<div id="tableAppear">
    
    
</div>
    
<br />
    
<br />
    
<br />
    
<input id="Button1" style="width: 206px" type="button" value="在任意行前增加一行" onclick="innser_Tr()"  />
     任意行:
<input id="Text_insert" type="text" value="1" /><br />
    
<br />
    
<br />
    
<br />
    
<input id="ButtonDel" type="button" value="删除任意行" style="width: 200px" language="javascript" onclick="return ButtonDel_onclick()" />
    任意行:
<input id="Text_del" type="text" value="2" />
    
<br />
    
<br />
    
<br />
    
<input id="ButtonReplace" style="width: 200px" type="button" value="取代子接点" language="javascript" onclick="return ButtonReplace_onclick()" />
    
<div id="replaceDiv">
    
<table id="replaceTable">
    
<tr>
    
<td width=30%>1</td>
    
<td width=35%>2</td>
    
<td width=35%>3</td>
    
</tr>
    
</table>
    
</div>
</form>
</body>
</html>

  评论这张
 
阅读(856)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017