<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>合并表格</title>
<script>
//功能：合并表格
//参数：tb－需要合并的表格ID
//参数：colLength－－需要对前几列进行合并，比如，
//想合并前两列，后面的数据列忽略合并，colLength应为2
//缺省表示对全部列合并
//data:2011.11.06
///////////////////////////////////////////////
function uniteTable(tb,colLength){
//检查表格是否规整
if(!checkTable(tb)) return
var i=0
var j=0
var rowCount=tb.rows.length//行数
var colCount=tb.rows[0].cells.length//列数
var obj1=null
var obj2=null
//为每个单元格命名
for(i=0i<rowCounti++){
for(j=0j<colCountj++){
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString()
}
}
//逐列检查合并
for(i=0i<colCounti++){
if(i==colLength) return
obj1=document.getElementById("tb__0_"+i.toString())
for(j=1j<rowCountj++){
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString())
if(obj1.innerText==obj2.innerText){
obj1.rowSpan++
obj2.parentNode.removeChild(obj2)
}else{
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString())
}
}
}
}
//功能：检查表格是否规整
//参数：tb－－需要检查的表格ID
//data: 2011.11.06
function checkTable(tb){
if(tb.rows.length==0) return false
if(tb.rows[0].cells.length==0) return false
for(var i=0i<tb.rows.lengthi++){
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false
}
return true
}
</script>
</head>
<body>
<table width="400" border="1" id="table1">
<tr>
<td>a</td>
<td>for</td>
<td>100</td>
<td>200</td>
<td>1</td>
</tr>
<tr>
<td>a</td>
<td>for</td>
<td>100</td>
<td>300</td>
<td>2</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>100</td>
<td>200</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>300</td>
<td>230</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>320</td>
<td>230</td>
<td>5</td>
</tr>
</table>
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)">
</body>
</html>
方法11、如果要合并单元格，请选中要合并的单元格。
2、单击“表格工具”中的“布局”选项卡（仅在将光标移到表格或选择表格中的单元格时，“表格工具”才会显示）
3、单击“合并”中的“合并单元格”以合并单元格。
方法2
1、如果要合并单元格，请选中要合并的单元格。
2、单击右键，选择“设置单元格格式”。
3、在窗口中，选择“对齐”在此可找到合并单元格的选项，勾选上即可。
温馨提示：word版本不同，显示页面会有差异，可根据实际版本找到相关的功能选项。
使用HTML DOM 对象方法 组合起来使用；
1、删除HTML元素<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">我是P1</p>
<p id="p2">我是P2</p>
</div>
<script>
var parent=document.getElementById("div1") ，查找 id="div1" 的元素：
var child=document.getElementById("p2") ，查找 id="p1" 的 <p> 元素：
parent.removeChild(child) ，从父元素中删除子元素：
</script>
</body>
</html>
2、添加HTML元素
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">我是P1</p>
<p id="p2">我是P2</p>
</div>
<script>
var para=document.createElement("p") ，这段代码创建了一个新的 <p> 元素
var node=document.createTextNode("我是P3") ，这段代码创建文本节点
para.appendChild(node) ，向 <p> 元素追加文本节点
var element=document.getElementById("div1") ，查找到一个已有的元素
element.appendChild(para) ，在上面查找到的元素中追加新元素：
</script>
</body>
</html>
其它的不一一说明：
方法 描述
getElementById() ，返回带有指定 ID 的元素。
getElementsByTagName() ，返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() ，返回包含带有指定类名的所有元素的节点列表。
appendChild() ，把新的子节点添加到指定节点。
removeChild() ，删除子节点。
replaceChild() ，替换子节点。
insertBefore() ，在指定的子节点前面插入新的子节点。
createAttribute() ，创建属性节点。
createElement() ，创建元素节点。
createTextNode() ，创建文本节点。
getAttribute() ，返回指定的属性值。
setAttribute() ，把指定属性设置或修改为指定的值。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）