jsp动态表格 合并单元格

时间：2022-11-20 14:07:30
  增加合并单元格的内容，包括，从a行b列开始合并，合并c行d列。界面上需要提供a、b、c、d四项的输入框。

   这个该怎么做哦？  要用JSP的写  小弟想了好久 还是没有解出来 希望哪位大哥帮帮忙。


              小弟在这里谢过了！

15 个解决方案

#1

colspan=?
rowspan=?

如果表格已经出来之后再合并，可能很麻烦

#2

恩 对啊 所以搞了好久了  恩 对 就是这两个标签

#3

试了一下 这个有点麻烦 合并后会把后面的挤出去 挤出去的怎么解决得自己按需要去处理
<html>
</head>
<script>
function test(){
var table=document.getElementById("testTable");
var rows=table.rows;
rows[1].cells[1].colSpan=2;
rows[1].cells[1].rowSpan=2;

}
</script>
</head>

<body>
<table id="testTable" border=1>
<tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td></tr>
</table>
<button onclick="test()" >test</button>
</body>
</html>

#4

建议对表格的内容设计数据结构，合并后重新生成表格输出

#5

支持4楼的，
表格应该要重新生成。。

#6

a

#7

那重新生成该怎么写呢？  本人对JSP  是处于菜鸟阶段 不好意思 不太会 

谢谢大家帮忙？  能写一个重新生成的给我看看嘛？

#8

个人认为这和jsp无关，完全是js

#9

我搞出来了，在3楼的基础上修改了 


<html> 

	</head> 

		<script language="javascript"> 

		function test(a,b,c,d){ 

			var table=document.getElementById("testTable"); 

			var rows=table.rows; 

			//处理第a行

			var cell=rows[a].cells[b];

			//保存要合并单元格的值

			var strTemp=cell.childNodes[0].nodeValue;

			for(var j=b;j<d;j++){

				var x=cell.nextSibling;

				while (x.nodeType!=1){

					x=x.nextSibling;

				}

				strTemp=strTemp+","+x.childNodes[0].nodeValue;

				cell.parentNode.removeChild(x);

			}


			//处理第a+1到a+c行

			for(var i=a+1;i<c+1;i++){

				var cell=rows[i].cells[b];

				for(var j=b;j<d+1;j++){

					//var cell=rows[a].cells[j];

					var x=cell.nextSibling;

					while (x.nodeType!=1){

						x=x.nextSibling;

					}

					strTemp=strTemp+","+x.childNodes[0].nodeValue;

					cell.parentNode.removeChild(x);

				}

			}


			rows[a].cells[b].colSpan=2; 

			rows[a].cells[b].rowSpan=2; 


			//如果没有下面的，合并后单元格的默认值是22

			//重新赋值给合并后的单元格,

			//rows[a].cells[b].childNodes[0].nodeValue=strTemp;


		} 

		</script> 

	</head> 


	<body> 

		<table id="testTable" border=1> 

			<tr> <td>11 </td> <td>12 </td> <td>13 </td> <td>14 </td> </tr> 

			<tr> <td>21 </td> <td>22 </td> <td>23 </td> <td>24 </td> </tr> 

			<tr> <td>31 </td> <td>32 </td> <td>33 </td> <td>34 </td> </tr> 

			<tr> <td>41 </td> <td>42 </td> <td>43 </td> <td>44 </td> </tr> 

		</table> 

		<button onclick="test(1,1,2,2)" >test </button> 

	</body> 

</html>

#10

补充一下：
rows[a].cells[b].colSpan=2; 
rows[a].cells[b].rowSpan=2; 
应该改为
rows[a].cells[b].colSpan=c; 
rows[a].cells[b].rowSpan=d;

另外row,cell的下标都是从0开始的

#11

我之前 写过一个 合并单元格的 js


思路：
1.去掉表格的内容：innerHTML
2.隐藏表格的边框：css

#12

呵呵 谢谢大家

#13

学习了 正好用到
引用 9 楼 wnjok 的回复:
我搞出来了，在3楼的基础上修改了
HTML code

<html> 
    </head> 
        <script language="javascript"> 
        function test(a,b,c,d){ 
            var table=document.getElementById("testTable"); 
            va……

#14

<html> 
    </head> 
        <script language="javascript"> 
        function test(a,b,c,d){ 
            var table=document.getElementById("testTable"); 
            var rows=table.rows; 
            //处理第a行
            var cell=rows[a].cells[b];
            //保存要合并单元格的值
            var strTemp=cell.childNodes[0].nodeValue;
             //alert(strTemp);
          for(var j=b;j<d;j++){
              var x=cell.nextSibling;
              while (x.nodeType!=1){
                  x=x.nextSibling;   
              }
              strTemp=strTemp+","+x.childNodes[0].nodeValue;
              cell.parentNode.removeChild(x);
          }
            
          //处理第a+1到a+c行
          for(var i=a+1;i<c+1;i++){
              var cell=rows[i].cells[b-1];
              for(var j=b;j<d+1;j++){
                  //var cell=rows[a].cells[j];
                  var x=cell.nextSibling;
                  while (x.nodeType!=1){
                      x=x.nextSibling;
                  }
                  strTemp=strTemp+","+x.childNodes[0].nodeValue;
                  alert(strTemp);
                  cell.parentNode.removeChild(x);
              }
          }
            
            rows[a].cells[b].colSpan=c;  
rows[a].cells[b].rowSpan=d;

        }        
        
        </script> 
    </head> 

    <body > 
        <table id="testTable" border=1> 
            <tr> <td>011 </td>  <td>112 </td> <td>113 </td> <td>114 </td> </tr> 
            <tr> <td>021 </td>  <td>212 </td> <td>213 </td> <td>214 </td> </tr> 
            <tr> <td>031 </td>  <td>312 </td> <td>313 </td> <td>314 </td> </tr> 
            <tr> <td>041 </td>  <td>412 </td> <td>413 </td> <td>414 </td> </tr> 
        </table> 
        <button onclick="test(1,1,2,2)">test(1,1,2,2)</button>
    </body> 
</html>

#15

我修改了一下，楼上的好像不对

补充一下：
var cell=rows[i].cells[b];
改成
var cell=rows[i].cells[b-1];
将
rows[a].cells[b].colSpan=2;  
rows[a].cells[b].rowSpan=2;  
应该改为
rows[a].cells[b].colSpan=c;  
rows[a].cells[b].rowSpan=d;

#1

colspan=?
rowspan=?

如果表格已经出来之后再合并，可能很麻烦

#2

恩 对啊 所以搞了好久了  恩 对 就是这两个标签

#3

试了一下 这个有点麻烦 合并后会把后面的挤出去 挤出去的怎么解决得自己按需要去处理
<html>
</head>
<script>
function test(){
var table=document.getElementById("testTable");
var rows=table.rows;
rows[1].cells[1].colSpan=2;
rows[1].cells[1].rowSpan=2;

}
</script>
</head>

<body>
<table id="testTable" border=1>
<tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td></tr>
</table>
<button onclick="test()" >test</button>
</body>
</html>

#4

建议对表格的内容设计数据结构，合并后重新生成表格输出

#5

支持4楼的，
表格应该要重新生成。。

#6

a

#7

那重新生成该怎么写呢？  本人对JSP  是处于菜鸟阶段 不好意思 不太会 

谢谢大家帮忙？  能写一个重新生成的给我看看嘛？

#8

个人认为这和jsp无关，完全是js

#9

我搞出来了，在3楼的基础上修改了 


<html> 

	</head> 

		<script language="javascript"> 

		function test(a,b,c,d){ 

			var table=document.getElementById("testTable"); 

			var rows=table.rows; 

			//处理第a行

			var cell=rows[a].cells[b];

			//保存要合并单元格的值

			var strTemp=cell.childNodes[0].nodeValue;

			for(var j=b;j<d;j++){

				var x=cell.nextSibling;

				while (x.nodeType!=1){

					x=x.nextSibling;

				}

				strTemp=strTemp+","+x.childNodes[0].nodeValue;

				cell.parentNode.removeChild(x);

			}


			//处理第a+1到a+c行

			for(var i=a+1;i<c+1;i++){

				var cell=rows[i].cells[b];

				for(var j=b;j<d+1;j++){

					//var cell=rows[a].cells[j];

					var x=cell.nextSibling;

					while (x.nodeType!=1){

						x=x.nextSibling;

					}

					strTemp=strTemp+","+x.childNodes[0].nodeValue;

					cell.parentNode.removeChild(x);

				}

			}


			rows[a].cells[b].colSpan=2; 

			rows[a].cells[b].rowSpan=2; 


			//如果没有下面的，合并后单元格的默认值是22

			//重新赋值给合并后的单元格,

			//rows[a].cells[b].childNodes[0].nodeValue=strTemp;


		} 

		</script> 

	</head> 


	<body> 

		<table id="testTable" border=1> 

			<tr> <td>11 </td> <td>12 </td> <td>13 </td> <td>14 </td> </tr> 

			<tr> <td>21 </td> <td>22 </td> <td>23 </td> <td>24 </td> </tr> 

			<tr> <td>31 </td> <td>32 </td> <td>33 </td> <td>34 </td> </tr> 

			<tr> <td>41 </td> <td>42 </td> <td>43 </td> <td>44 </td> </tr> 

		</table> 

		<button onclick="test(1,1,2,2)" >test </button> 

	</body> 

</html>

#10

补充一下：
rows[a].cells[b].colSpan=2; 
rows[a].cells[b].rowSpan=2; 
应该改为
rows[a].cells[b].colSpan=c; 
rows[a].cells[b].rowSpan=d;

另外row,cell的下标都是从0开始的

#11

我之前 写过一个 合并单元格的 js


思路：
1.去掉表格的内容：innerHTML
2.隐藏表格的边框：css

#12

呵呵 谢谢大家

#13

学习了 正好用到
引用 9 楼 wnjok 的回复:
我搞出来了，在3楼的基础上修改了
HTML code

<html> 
    </head> 
        <script language="javascript"> 
        function test(a,b,c,d){ 
            var table=document.getElementById("testTable"); 
            va……

#14

<html> 
    </head> 
        <script language="javascript"> 
        function test(a,b,c,d){ 
            var table=document.getElementById("testTable"); 
            var rows=table.rows; 
            //处理第a行
            var cell=rows[a].cells[b];
            //保存要合并单元格的值
            var strTemp=cell.childNodes[0].nodeValue;
             //alert(strTemp);
          for(var j=b;j<d;j++){
              var x=cell.nextSibling;
              while (x.nodeType!=1){
                  x=x.nextSibling;   
              }
              strTemp=strTemp+","+x.childNodes[0].nodeValue;
              cell.parentNode.removeChild(x);
          }
            
          //处理第a+1到a+c行
          for(var i=a+1;i<c+1;i++){
              var cell=rows[i].cells[b-1];
              for(var j=b;j<d+1;j++){
                  //var cell=rows[a].cells[j];
                  var x=cell.nextSibling;
                  while (x.nodeType!=1){
                      x=x.nextSibling;
                  }
                  strTemp=strTemp+","+x.childNodes[0].nodeValue;
                  alert(strTemp);
                  cell.parentNode.removeChild(x);
              }
          }
            
            rows[a].cells[b].colSpan=c;  
rows[a].cells[b].rowSpan=d;

        }        
        
        </script> 
    </head> 

    <body > 
        <table id="testTable" border=1> 
            <tr> <td>011 </td>  <td>112 </td> <td>113 </td> <td>114 </td> </tr> 
            <tr> <td>021 </td>  <td>212 </td> <td>213 </td> <td>214 </td> </tr> 
            <tr> <td>031 </td>  <td>312 </td> <td>313 </td> <td>314 </td> </tr> 
            <tr> <td>041 </td>  <td>412 </td> <td>413 </td> <td>414 </td> </tr> 
        </table> 
        <button onclick="test(1,1,2,2)">test(1,1,2,2)</button>
    </body> 
</html>

#15

我修改了一下，楼上的好像不对

补充一下：
var cell=rows[i].cells[b];
改成
var cell=rows[i].cells[b-1];
将
rows[a].cells[b].colSpan=2;  
rows[a].cells[b].rowSpan=2;  
应该改为
rows[a].cells[b].colSpan=c;  
rows[a].cells[b].rowSpan=d;

标签：

相关文章