博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqurey将Excel读取数据到html的table中
阅读量:7009 次
发布时间:2019-06-28

本文共 6304 字,大约阅读时间需要 21 分钟。

直接代码。然后注释。

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqurey-ui.js"></script>
<link rel="stylesheet" href="jqurey-ui.css" />
<script type="text/javascript">
function tabit(ul,css,div){//兼容IE的tab实现,原理很简单
         $(div).children().hide();
         $(div).each(function(){
   $(this).children().eq(0).show();
   });
 $(ul).each(function(){
   $(this).children().eq(0).addClass(css);
   });
     $(ul).children().click(function(){
        $(this).addClass(css).siblings().removeClass(css);
         var index = $(ul).children().index(this);
         $(div).children().eq(index).show().siblings().hide();
    });
}

//打开本地目录中的excel文件,读取,并写入table

function openExcel(file)
  var Excel = new ActiveXObject("Excel.Application");//创建excel对象,由于是office对象所以只能在IE下进行,如果失败的话,请检查dcom设置,为everyone添加权限。详细略;
  Excel.Visible = false;//设置Excel不可见。调试过程中可设置可见,方便查看代码执行情况;
  var workbook = Excel.workbooks.open(file);//打开file文件,返回一个工作簿对象;
  var sheetCount = workbook.Sheets.Count;//返回当前打开工作簿的sheet数,为Tab的创建提供tab参数;
 // alert(sheetCount);

  /*$("<ul></ul>").attr("id","ss").appendTo("#tab");
    for(var c=1; c<=sheetCount;c++){
    $("ul").append($("<li></li>").append($("<a>sheet"+c+"</a>").attr("href","#sheet"+c)));
    $("<div>这里是sheet"+c+"</div>").attr("id","sheet"+c).insertAfter($("#ss"));
    //$("#div"+c).addClass("hide");
    *///这里是调用jqurey_ui.js提供的方法,直接生成Tab,但是在IE6下不能正常工作。
    
    $("#menu").append($("<ul></ul>").attr("id","xx"));
    $("<div></div>").attr("id","con").addClass("con").appendTo("#tab");
    for(var c=1;c<=sheetCount;c++)
    {
        $("#xx").append($("<li>sheet"+c+"</li>").attr("id","sheet"+c));
        $("<div>sheet"+c+"</div>").attr("id","sheet"+c).appendTo("#con").append($("<table></table>").attr("id","t"+c));
        $("sheet"+c).css("overflow","hidden");

//tab栏完成并且添加用于放置table的div

  var workSheet = workbook.workSheets(c);//循环打开指定index的sheet;
  //Excel.Cells.Select;
  //Excel.Selection.Copy();
  //document.all.editdiv.focus();
  //rang = document.selection.createRange();
  //rang.execCommand("Paste");
  //$("#editdiv"). = ActiveSheet.Cells(1, 1).Value;
  //Excel.Visible = true;

//以上为整体复制的。网上弄过来的;

  var row = workSheet.UsedRange.Rows.Count;//返回使用区域的行数
  //alert(row);
  var col = workSheet.UsedRange.columns.Count;//返回使用区域的列数
  //alert(col);
  var i,j;
  try{
  //table.appendTo($("#test"));
  try{
  //$("<table></table>").attr("id","t"+c).appendTo("#sheet"+c);
  }
  catch(e)
  {
    alert("table bad");  
    }

//循环读取excel已使用区域的值,若为undefined则设为"";这种方法只能用于简单的excel表格,对于合并单元格的复杂格式表格,还有待补充。当然也可以用excel做数据库。

  for(i=1;i<=row;i++)
  {
      try{
       var tr=$("<tr></tr>").attr("id","tr"+i);
        //tr.appendTo(table);
        $("#t"+c).append(tr);
        }
  catch(e)
  {
    alert("tr bad");  
    }
        for(j=1;j<=col;j++)
        {
            //document.write("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //var td=$("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //tr.append(td);
           //td.appendTo(tr);
           var val = workSheet.Cells(i, j).Value;
           if (val==undefined)
           {
               val="";
            }
           //alert(val);
           try{
               var td = $("<td>"+val+"</td>");
               
               td.appendTo(tr);
           }
  catch(e)
  {
    alert("td bad");  
    }
           //document.write(workSheet.Cells(i, j).Value+"<br />");
        }
        
    }
  }
  catch(ex)
  {
      
      Excel.Quit();
      alert("bad!");
     }
     
    //$("#test").append("</table>")
  }
  Excel.Quit();//关闭
  //$("#tab").tabs();

//关闭excel对象;

  tabit("#xx","active","#con");
}
</script>
<style type="text/css">
*{
    padding:0;
    margin:2px;
    font:12px;
    list-style-type:none;
}
table, th, td {
    border: 1px solid #CCC;
    text-align: center;
    overflow: hidden;
    border-collapse: collapse;
}
li {
    color: #466BAE;
    cursor: pointer;
    float: left;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
    list-style-type: none;
    border: 1px solid #C4C2C2;
}
    
.active {
  background: #fff;
  font-weight:600;
  border-bottom:2px solid #8db2e3;
}
.hide
{
    display:none;
}
.con{
    overflow:hidden;
    border: solid 1px #CCCCCC;
    clear:both;
}
</style>
</head>
<body>
<form action="">
<noscript><div id="noscript_msg" class="msg">您需要启动JavaScript,才能使用本网页。</div></noscript>
<input type="button" value="打开 Excel" οnclick='openExcel("F:/test/test.xls");'><br>
</form>
<div id="tab" style="min-width:420px; min-height:400px; overflow:hidden; border: solid #F00 1px;">
<div id="menu" style="float:left; min-width:350px; min-height:46px; border: solid #FF0 1px;"></div>
</div>
</body>
</html>
=============================================================================================

日后补充

=============================================================================================

好了来补充了。。

先上代码//这段代码是上面代码中蓝色背景的部分的修改版,主要是根据前面一篇转载文字的思路改动从而可以支持简单的合并单元格的读取以及正确的table写入;

 for(i=1;i<=row;i++)

  {
      try
      {
          var tr=$("<tr></tr>").attr("id","tr"+i);
          //tr.appendTo(table);
          $("#t"+c).append(tr);
          }        
          catch(e)
          {
              alert("tr bad");
            }
        for(j=1;j<=col;j++)
        {
            //document.write("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //var td=$("<td>"+ActiveSheet.Cells(i, j).Value+"</td>");
           //tr.append(td);
           //td.appendTo(tr);
           var RangeArea=getMark(i,j);//getMark用于获取区域引用的地址
           var MergeArea=workSheet.Range(RangeArea).MergeArea;
           if(MergeArea.Address==getAddress(i,j))
           {
               //当前单元格为单一单元格,此时直接取值,写入创建的td中
               var val = workSheet.Cells(i, j).Value;
               if (val==undefined)
               {
                   val="";
                   }
                   //alert(val);
                   try
                   {
                       var td = $("<td>"+val+"</td>");
                       td.appendTo(tr);
                       }
                       catch(e)
                       {
                           alert("td bad");
                           }
                }
                else
                {
                    //当前单元格为拆分单元格,先读取数据(其实是重复数据),写入创建的td,为他添加了以合并单元格长宽为值的rowspan和colspan,这里为td加入特别的ID。当第2次遍历到该范围,在判断了此单元格任然在合并单元格内时,也就是说我们创建的这个td是重复的,所以后面应该删掉。
                    var mergeRowCount=MergeArea.Rows.Count;
                    var mergeColumnsCount=MergeArea.Columns.Count;
                    var val = workSheet.Cells(i, j).Value;
                    if (val==undefined)
                    {
                        val="";
                    }
                    //alert(val);
                    try
                    {
                        var td = $("<td>"+val+"</td>").attr({rowspan:mergeRowCount,colspan:mergeColumnsCount,id:"td"+i});
                        td.appendTo(tr);
                    }
                    catch(e)
                    {
                        alert("td bad");
                    }
                    if(mergeRowCount>1&&i>1)
                    {
                        var upMergeArea=workSheet.Range(getMark(i-1,j)).MergeArea;
                        if(upMergeArea.Address==MergeArea.Address)
                        $("#td"+i).remove();
                    }
                    if(mergeColumnsCount>1) j+=mergeColumnsCount-1;
                }
                //document.write(workSheet.Cells(i, j).Value+"<br />");
            }
        }
    }

//但是仍然还是会出现错位情况,对于很大而且复杂的表格,效率很低,浏览器会卡死。另外寻求其他解决办法。

=============================================================================================

日后再补充

转载于:https://www.cnblogs.com/swallows/p/3682213.html

你可能感兴趣的文章