1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中，则写在<script>标签内部，如

代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下

代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中

     java读取html文件跟读取普通文件一样，都是使用输入输出流，但是java读取html文件之后还需要解析，使用Jsoup对html进行解析。下面是一个java读取带表格的任意html文件，并把html文件转换成excel的例子。

  要求： 要求能够实现给出任意带table表格的html文件，生成与表格相同内容的excel文件，附件可以作为测试文件，提供给定的roster.html文件，通过java代码，实现生成与html页面的table相同样式的roster.xls文件。

首先看roster.html:

java代码：

import java.io.File

import java.io.FileReader

import java.io.IOException

import jxl.Workbook

import jxl.write.Label

import jxl.write.WritableCellFormat

import jxl.write.WritableFont

import jxl.write.WritableSheet

import jxl.write.WritableWorkbook

import jxl.write.WriteException

import jxl.write.biff.RowsExceededException

import org.jsoup.Jsoup

import org.jsoup.nodes.Document

import org.jsoup.nodes.Element

import org.jsoup.select.Elements

public class HTMLTOExcel {

public static void main(String args[]) throws IOException{

///读取classpath目录下面的路径

String path=HTMLTOExcel.class.getResource("/").getPath()

path+="roster.html"

toExcel(path,"roster")      

    }

    //得到Document并且设置编码格式

public static Document getDoc(String fileName) throws IOException{

      File myFile=new File(fileName)

      Document doc= Jsoup.parse(myFile, "GBK","")

      return doc

}

///这个方法用于根据trs行数和sheet画出整个表格

public static void mergeColRow(Elements trs,WritableSheet sheet) throws RowsExceededException, WriteException{

int[][] rowhb=new int[300][50]

for(int i=0i<trs.size()i++){

 Element tr=trs.get(i)

 Elements tds=tr.getElementsByTag("td")

 int realColNum=0

 for(int j=0j<tds.size()j++){

  Element td=tds.get(j)  

  if(rowhb[i][realColNum]!=0){

  realColNum=getRealColNum(rowhb,i,realColNum)

  }

  int rowspan=1

  int colspan=1

  if(td.attr("rowspan")!=""){

  rowspan = Integer.parseInt(td.attr("rowspan"))

  }

  if(td.attr("colspan")!=""){

  colspan = Integer.parseInt(td.attr("colspan"))

  }

  String text=td.text()

  drawMegerCell(rowspan,colspan,sheet,realColNum,i,text,rowhb)

  realColNum=realColNum+colspan

 }

}

}

///这个方法用于根据样式画出单元格，并且根据rowpan和colspan合并单元格

public static void drawMegerCell(int rowspan,int colspan,WritableSheet sheet,int realColNum,int realRowNum,String text,int[][] rowhb) throws RowsExceededException, WriteException{

  for(int i=0i<rowspani++){

  for(int j=0j<colspanj++){

  if(i!=0||j!=0){

 text=""

  }

  Label label = new Label(realColNum+j,realRowNum+i,text)

   WritableFont countents = new WritableFont(WritableFont.TIMES,10) // 设置单元格内容，字号12  

   WritableCellFormat cellf = new WritableCellFormat(countents ) 

   cellf.setAlignment(jxl.format.Alignment.CENTRE)//把水平对齐方式指定为居中

   cellf.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE)//把垂直对齐方式指定为居

   label.setCellFormat(cellf)

   sheet.addCell(label)

   rowhb[realRowNum+i][realColNum+j]=1

  }

  }

  sheet.mergeCells(realColNum,realRowNum, realColNum+colspan-1,realRowNum+rowspan-1)

}

public static int getRealColNum(int[][] rowhb,int i,int realColNum){

while(rowhb[i][realColNum]!=0){

realColNum++

}

return realColNum

}

///根据colgroups设置表格的列宽

public static void setColWidth(Elements colgroups,WritableSheet sheet){

 if(colgroups.size()>0){

 Element colgroup=colgroups.get(0)

 Elements cols=colgroup.getElementsByTag("col")

 for(int i=0i<cols.size()i++){

 Element col=cols.get(i)

 String strwd=col.attr("width")

 if(col.attr("width")!=""){

 int wd=Integer.parseInt(strwd)

 sheet.setColumnView(i,wd/8)

 }

 }

 }

}

//toExcel是根据html文件地址生成对应的xls

public static void toExcel(String fileName,String excelName)throws IOException{

Document doc=getDoc(fileName)

    String title = doc.title()

    ///得到样式，以后可以根据正则表达式解析css，暂且没有找到cssparse

    Elements style= doc.getElementsByTag("style")

    ///得到Table，demo只演示输入一个table，以后可以用循环遍历tables集合输入所有table

    Elements tables= doc.getElementsByTag("TABLE")    

    if(tables.size()==0){

    return

    }

    Element table=tables.get(0)

   //得到所有行

    Elements trs = table.getElementsByTag("tr")

    ///得到列宽集合

    Elements colgroups=table.getElementsByTag("colgroup")

   try {

   //文件保存到classpath目录下面

    String path=HTMLTOExcel.class.getResource("/").getPath()

path+=excelName+".xls"

 System.out.println(path)

    WritableWorkbook book = Workbook.createWorkbook(new File(path))    

    WritableSheet sheet = book.createSheet("人事关系", 0)  

    setColWidth(colgroups,sheet)

    mergeColRow(trs,sheet)    

    book.write()    

    book.close()    

   } catch (RowsExceededException e) {

        e.printStackTrace()

   } catch (WriteException e) { 

        e.printStackTrace()

   }

}

}

解析html文件的例子文档地址：http://blog.csdn.net/androidwuyou/article/details/52636821

使用ajax技术对服务器发送请求（服务器需要设置过返回数据（可以是json也可以是xml之类的）），然后再在前台用javascript对数据进行处理，用jquery进行ajax比较简单。

var args="请求参数，一般可以加个new Date()作为参数"

var method="post"//或者get之类的

$.ajax({url:myurl,data:args,type:method,success:function(data) {

//获取数据成功后的操作

},error:function(){

//获取数据失败后的操作

}})