您的位置:阿里西西 > js网页特效代码 > 文字特效 > 用于快速填充单元格数据的效果

用于快速填充单元格数据的效果

  本站整理   佚名   2013-01-09   点击:   我要评论
更多
表格的单元格宽度固定一下,然后测试之后发现,点来点去都是怒~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字JS特效 by js.alixixi.com</title>
<style type="text/css">
*{ -moz-user-select:none } 
td{line-height:50px; text-align:center;}
</style>
</head>

<body>
<table width="800" border="1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script type="text/javascript">
var datas="怒发冲冠,凭阑处,潇潇雨歇。抬望眼,仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲,白了少年头,空悲切。 靖康耻,犹未雪;臣子恨,何时灭。驾长车踏破,贺兰山缺。壮志饥餐,胡虏肉笑,谈渴饮匈奴血。待从头,收拾旧山河。朝天阙。珊处".split("");
var ctrl=false;
var tds=document.getElementsByTagName("td");
var tds1=[];
document.documentElement.onmousedown=function(){
 ctrl=true;
 }
document.documentElement.onselectstart=function(){
 return false;
 }
document.documentElement.onmouseup=function(){
 ctrl=false;
 tds1=[];
 for(i=0;i<tds.length;i++){
  if(tds[i].style.background!="")
  tds1.push(tds[i]);
  tds[i].style.background="";}
 fillDatas(tds1,datas);
 }
for(i=0;i<tds.length;i++){
 tds[i].onmousemove=function(){
  if(!ctrl)return;
  this.name=this.style.background;
  this.style.background="#ffff00";
  }
 }
document.documentElement.onkeydown=function(){
 ctrl=true;
 }
function fillDatas(td,datas){
 if(td.length>datas.length)return;
 for(i=0;i<td.length;i++){
  td[i].innerHTML=datas[i];
  }
 }
</script>
</body>
</html>


更多关于 快速填充 单元格 的文章
相关阅读
会员评论所有会员评论

  

相关排行总榜

广告代码

菜单特效

日期特效