社区
JavaScript
帖子详情
<**--如何用JavaScript去合并table中某些单元格??--**>
leolee
2002-04-18 09:10:29
因为合并是根据随机数据进行的,没有固定格式,只能根据数据值去考虑,js里面如何对table的单元格进行合并呢?
...全文
242
4
打赏
收藏
<**--如何用JavaScript去合并table中某些单元格??--**>
因为合并是根据随机数据进行的,没有固定格式,只能根据数据值去考虑,js里面如何对table的单元格进行合并呢?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
8988
2002-04-18
打赏
举报
回复
<table border="1" width="100%" id=tab1 onmousedown=tabStart() onmouseup=tabEnd()>
<tr>
<td width="25%">111</td>
<td width="25%">111</td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%">222</td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
<p>从第<input type="text" name="col1" size="4">列到第<input type="text" name="col2" size="4">列
从第<input type="text" name="row1" size="4">行到第<input type="text" name="row2" size="4">行<input type="button" value="合并" onclick=doTab()></p>
<script>
function doTab(){
x1=col1.value-1;
x2=col2.value-1;
y1=row1.value-1;
y2=row2.value-1;
if (x1==x2 && y1==y2) return;
htmlstr="";
xspan=0;
yspan=0;
for (i=x1;i<=x2;i++) xspan+=tab1.rows[y1].cells[i].colSpan;
for (i=y1;i<=y2;i++) yspan+=tab1.rows[i].cells[x1].rowSpan;
for (i=y1;i<=y2;i++) {
htmlstr+="<br>";
for(j=x1;j<=x2;j++){
htmlstr+=tab1.rows[i].cells[j].innerHTML;
}
}
htmlstr=htmlstr.substr(4);
for (i=y1;i<=y2;i++){
j=x1;
while (j<x2){
tab1.rows[i].deleteCell(x1);
j++;
}
tab1.rows[i].cells[x1].colSpan=xspan;
}
for (i=y2;i>y1;i--){
tab1.rows[i].deleteCell(x1);
}
tab1.rows[y1].cells[x1].rowSpan=yspan;
tab1.rows[y1].cells[x1].innerHTML=htmlstr;
//alert(htmlstr);
}
function tabStart(){
obj=window.event.srcElement;
col1.value=obj.cellIndex+1;
col2.value=col1.value;
row1.value=obj.parentElement.rowIndex+1;
row2.value=row1.value;
}
function tabEnd(){
obj=window.event.srcElement;
col2.value=obj.cellIndex+1;
row2.value=obj.parentElement.rowIndex+1;
}
</script>
karma
2002-04-18
打赏
举报
回复
try something like this:
<table id="tbl" border="1" cellpadding="0" cellspacing="0">
<tr><td>hello</td><td>world</td>><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td><b>china</b></td><td>hello</td><td>china</td></tr>
</table>
<input type="button" value="merge 2nd row, 1,2,3 cells" onclick="merge(1,0,2)">
<script language="javascript">
function merge(nRow, nColStart, nColEnd)
{
var rows = tbl.rows;
if (nRow < 0 || nRow >= rows.length)
return;
var cells = rows[nRow].cells;
if (nColStart < 0 || nColStart >= cells.length || nColEnd < 0 || nColEnd >= cells.length ||
nColStart > nColEnd)
return;
var s= "";
for (var i=nColStart; i <=nColEnd; i++)
s += cells[i].innerHTML + " ";
for (var i=nColStart; i <nColEnd; i++)
rows[nRow].deleteCell(nColStart);
rows[nRow].cells[nColStart].colSpan = nColEnd - nColStart + 1;
rows[nRow].cells[nColStart].innerHTML = s;
}
</script>
leolee
2002-04-18
打赏
举报
回复
谢谢~~~~
blues-star
2002-04-18
打赏
举报
回复
找到相应的单元格,设置colspan或者rowspan属性,然后删去多余的单元格
JSP
Table
单元格
合并
JSP
Table
单元格
合并
javascript
javascript
万能
table
合并
单元格
js版
只要输入
table
的id,就可以自动
合并
单元格
,只要上下相邻的
单元格
相同的,都会
合并
html版比较好,点下面的 http://download.csdn.net/source/1276574
手势解锁-canvas-
javascript
实战
掌握canvas基本用法; 掌握手势解锁实现原理; 得到注释详尽的源码; 掌握canvas的学习方法
javascript
万能
table
合并
单元格
,隐藏列 html版
html直接看效果 只要输入
table
的id,就可以自动
合并
单元格
,只要上下相邻的
单元格
相同的,都会
合并
html-
table
-editor-resizer:表格插件拖动,
合并
,编辑插件。Merge cells, split cells, drag to resize
table
, a very usefull
table
plugin with no dependency
原生
javascript
表格插件,可以拖动改变大小,
合并
单元格
等 Demo 安装 npm install npm run dev ...t.CreateFromString('<
table
><tr><td></td><td></td></tr><tr><td></td><td></td></tr></
table
>',document.bo
JavaScript
87,903
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章