js中如何动态给一个表格中的某一个单元格添加一个超链接作为单元格内容?

JavaScript020

js中如何动态给一个表格中的某一个单元格添加一个超链接作为单元格内容?,第1张

思路:获取行对象→获取列对象→使用innerHTML为单元格添加超链接内容,实例演示如下:

1、HTML结构

<table id = "test">

<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>

<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>

<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>

<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>

</table>

第<input type="text" id="row">行第<input type="text" id="col">列<input type='button' value='确定' onclick="fun()"/>

2、javascript代码

function fun(){

row = document.getElementById("row").value - 1

col = document.getElementById("col").value - 1

tr = document.getElementById("test").getElementsByTagName("tr")

td = tr[row].getElementsByTagName("td")[col]

td.innerHTML = "<a href='#'>超链接</a>"

}

3、效果演示

JS-打印word的模板程序

我们在做项目中经常遇到“打印表格”的功能,在此介绍一下我所用过的打印方法。

一、比较简单的做法,word另存转化为html文件的方式。分析如下:

1、首先我们需要在office中用wrod画好文件的模板,然后将其另存为thm网页形式。

2、将其改为jsp页面,这样我们就可以文件中使用后来传过来的变量值。此时就是我们传统的jsp方式,后台定义参数,然后前台获取,将变量值写在我们需要显示的地方。

3、对于表格,我们可以用循环来控制。

4、这样做打比较简单,缺点word模板不能修改,一旦表格做个微小的变化,那我们的工作量也不小,因为word转化后的代码很难读懂,要在代码上控制其样式,是相当的困难,所以不推荐这种做法。

(注:1、 在做模板时,我们可以先在需要显示变量值的地方首先定义好值,然后在jsp中直接替换就行。

2、在jsp页面中,在首先加入“<%@ page contentType="application/mswordcharset=UTF-8"%>”, 以标识此页面为word文件。

3、如果需要点击时直接打开word文件,而非弹出“保存、打开”对话框,则需要删除“xmlns:w="urn:schemas-microsoft-com:office:office"”代码即可。

下面我们介绍另一种更常用的方法,此方法的有点是:修改word模板文件,不会影响程序。

二、用JS控制的打印方式,具体如下:

1、首先画word模板,在需要动态显示内容的地方插入“标签”。方法如下:在word中,选中需要被替换的内容-->插入-->书签,为其定义好名字即可,其它类似。

2、将做好的模板文件另存为模板dot文件。

做到这基本就差不多了,接下来就是后台代码发挥的时候了。

3、在后台封装参数值。

4、调用JS函数打印。

为了更为直观的介绍,下面用一完整的例子介绍。

先把代码贴出来:

1、JS模板文件,适用范围:

a. 根据文档文件,所有要显示的内容都定义为书签。

b. 纯表格文件。如果为多个表格或表格中嵌套表格,则需要稍加修改。

c. 文档、表格混搭型。

代码如下:

/** * 得到 文件模板的目录 * @param {} fileName * @return {} */ function getFileTemplatePath(fileName){ var path = "/page/printTemplate/" + fileName + ".dot"var url="http://"+window.location.hostname + ":" + window.location.port+ this.getContextPath() + pathreturn url} /** * 调出word模板,并为标签赋值 * @param {} jsonObj json对象 * @param {} fileName 所要打开的word文件名 */ function printWord(jsonObj,fileName){ var word=new ActiveXObject("Word.Application")word.Visible=truevar url= this.getFileTemplatePath(fileName)word.Documents.add(url) for(i=0i<jsonObj.lengthi++){ if ((jsonObj[i].text)!="list"){ range=word.ActiveDocument.Bookmarks(jsonObj[i].text).Rangerange.text=jsonObj[i].value}else{ var myTable=word.ActiveDocument.Tables(1)var rowsCount = myTable.Rows.Countvar iRow=2for(j=0j<jsonObj[i].value.lengthj++){ if (iRow >rowsCount){ myTable.Rows.Add()} var length = jsonObj[i].value[j].lengthfor(var k=0k<lengthk++){ myTable.Rows(iRow).Cells(k + 1).Range.Text=jsonObj[i].value[j][k].value} iRow ++} } } word.Visible=true}

2、看到代码就会明白,这段代码需要一个JSON类型的参数。

下一步我们所做的工作就是要在JSON上做文章了。 附后台代码(封装JSON,java)

类:PrintJSONObjectSet

import org.json.JSONArrayimport org.json.JSONObjectpublic class PrintJSONObjectSet { private JSONArray japublic PrintJSONObjectSet(){ ja = new JSONArray()} public JSONArray getJSONArray(){ return ja} public JSONObject json(Object key, Object value) throws Exception{ JSONObject jo = new JSONObject()value = "".equals(value) || value == null "" : valuejo.put("text", key)jo.put("value", value)return jo} public void put(Object key, Object value) throws Exception{ ja.put(json(key,value))} public void put(Object obj){ ja.put(obj)} }

打印封装的方法:

/** * 打印出国(境)证明 * @return * @throws Exception */ public String printChuGuoJingZhengMing() throws Exception{ JSONArray ja = new JSONArray()GroupInfo group = this.getGroupInfo()String[] countrys = this.getCountrys()if(countrys != null){ for(int c=0c<countrys.lengthc++){ PrintJSONObjectSet js = new PrintJSONObjectSet()SeedGroupRef seed = seedImpl.getCzcz(getGroupInfoId(),countrys[c])js.put("year", seed.getFileYear())js.put("fileNum", seed.getFileNum())js.put("leader",group.getLeader())js.put("groupCount", group.getGroupCount())js.put("country",countrys[c])js.put("dispCode",getDispCode())js.put("printYear", DateFunc.getPrintYear())js.put("printMonth", DateFunc.getPrintMonth())js.put("printDay", DateFunc.getPrintDay())PrintJSONObjectSet js2 = new PrintJSONObjectSet()List<MemberInfo>memberList = this.getIsSefMembers()MemberInfo memberfor(int i=0i<memberList.size()i++){ PrintJSONObjectSet js3 = new PrintJSONObjectSet()member = memberList.get(i)js3.put("name1",member.getName())js3.put("passportNum1",member.getPassportNum())if(++i <memberList.size()){ member = memberList.get(i)js3.put("name2",member.getName())js3.put("passportNum2",member.getPassportNum())} js2.put(js3.getJSONArray())} js.put("list", js2.getJSONArray())ja.put(js.getJSONArray())} } PrintWriter outSystem.out.println(ja.toString())try{ out = response.getWriter()out.print(ja.toString())out.close()}catch(Exception e){ e.printStackTrace()} return null}

对于JSON的说明:

1、最外层为一个JSONArray,这个JSON中包含多个JSONArra,其控制文档的数量。

2、在第二层JSONArray中,包含多个JSONObject。其中每个JSONObject包含一个JSONObject对象。

每个JSONObject对象以{"text":"name","value":"张三"}的形式存储。

3、遇到表格时,则在第二个JSONArray中,封装类型{"text":"list","value":[[{"text":"","value:""}]]}形式。

也就是说此时的JSONObject的值必须为list,只有这样,JS中才能将其作为表格来输入。

其中在名为 list 的JSONObject对象中,包含多个JSONArray,用来控制行数。

每个JSONArray中包含多个类型第2条中形式的JSONObject对象,用来控制列数。

调用方法:(采用aJax)

Ext.Ajax.request({ url : href, success : function(response, options) { var responseText = response.responseTextvar jsonObj=eval('(' + responseText + ')')for(var i=0i<jsonObj.lengthi++){ printWord(jsonObj[i],'chuGuoJingZhengMing')} }, failure : function(response, options) { alert("fail!")} })

例子中的word文件:

如果国家为多个时,则会打印出多个文件。

对于代码的说明:

在后台代码封装中,我们将 书签名 和 值 封装为一个JSON对象,这样JS处理中,我们就方便了,不用再逐个写出每个书签的`名字,供其查找、然后赋值。

在后台代码中,我这里在打印时需要根据国家来确定所要打印的文档数量,如果为多个国家则要打印出多个文档,所以在后台封装,最外层又加了一个JSONArray,JS中也多了一道循环,这个可以根据需要自己调整。

特殊情况下,需要我们单独处理,如多个表格的情况下,或者表格嵌套表格。

这里说一下表格嵌套的情况下,如果获得被嵌套的表格对象。

如:var myTable=word.ActiveDocument.Tables(1).Rows(1).Cells(1).Tables(1)

这里得到的是文档中第一个表格的第一行的每一列中的每一个表格对象,其它类似。

range=word.ActiveDocument.Bookmarks("name").Range 的意思是 得到文档中 书签名为“name”的对象。

range.text=“张三” 为其赋值为 张三。

这里采用的是dot文件,因为dot文件存在于服务器上,如果使用doc文件作为模板文件的话,在多人访问时,会出现线程锁死的情况,故采用dot文件。

附加一段生成好的JSON串:

[ [ {"text":"year","value":2011}, {"text":"fileNum","value":5}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"俄罗斯"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[[ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ], [ {"text":"year","value":2011}, {"text":"fileNum","value":7}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"韩国"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[ [ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ] ]

我测试了一下,建立和其它表格的链接可以通过两种方式:

1、插入-超级链接:链接表格显示为链接标识,点击激活,会另外打开工作表,不打开的情况下只能打印出链接标识。

2、插入-对象-由文件创建:这种方式可以将嵌入的表格显示在原表格中,可以实现直接打印而不用打开关链表格,仅需编辑该嵌入的关联表格时,双击即可,十分方便。若不想显示表格内容,也可设置显示为图标,但EXCEL打印只能所见即所得,也就是显示效果即打印效果。

供参考,祝应用愉快!