表格合并
点击单元格选择需要合并的,暂时只能合并同一行的
原创文章,转载请注明出处:表格合并
+展开
-HTML
<style type="text/css">
#myTable tbody tr td.focus{ background-color:blue;}
</style>
<div>点击单元格选择需要合并的,暂时只能合并同一行的 :-)</div>
<table id="myTable" border="1px">
<tbody>
<tr><td>1_1</td><td>1_2</td><td>1_3</td><td>1_4</td></tr>
<tr><td>2_1</td><td>2_2</td><td>2_3</td><td>2_4</td></tr>
<tr><td>3_1</td><td>3_2</td><td>3_3</td><td>3_4</td></tr>
<tr><td>4_1</td><td>4_2</td><td>4_3</td><td>4_4</td></tr>
</tbody>
</table><br >
<input type="button" value="合并选择的" onclick="HeB()" />
<script type="text/javascript">
var tdArr=[],nowRowIndex=null;
document.onclick=function(e){
e=e||event;
var o=e.srcElement||e.target;
if(o.tagName=="TD"){
if(nowRowIndex==null){
nowRowIndex=o.parentNode.rowIndex;
o.className="focus";
tdArr.push(o);
}else if(nowRowIndex===o.parentNode.rowIndex){
if(o.className=="focus"){
remove(o);
o.className="";
}
else{
o.className="focus";
tdArr.push(o);
}
}
}
}
function remove(o){
for(var i=0;i<tdArr.length;i++){
if(tdArr[i]==o){
tdArr=tdArr.splice(i,1);
return;
}
}
}
function SortFunc(a,b){
return a.cellIndex-b.cellIndex;
}
function HeB(){
if(tdArr.length<2){
alert('请先选择合并的单元格!');
return;
}
tdArr.sort(SortFunc);
var tr=tdArr[0].parentNode,td=tdArr[0];
td.className="";
var colspan=0;
for(var i=0;i<tdArr.length;i++){
if(tdArr[i].colSpan)colspan+=parseInt(tdArr[i].colSpan);
if(i>0){
td.innerHTML+=tdArr[i].innerHTML;
tr.removeChild(tdArr[i]);
}
}
td.colSpan=colspan;
nowRowIndex=null;
tdArr=[];
}
</script>
#myTable tbody tr td.focus{ background-color:blue;}
</style>
<div>点击单元格选择需要合并的,暂时只能合并同一行的 :-)</div>
<table id="myTable" border="1px">
<tbody>
<tr><td>1_1</td><td>1_2</td><td>1_3</td><td>1_4</td></tr>
<tr><td>2_1</td><td>2_2</td><td>2_3</td><td>2_4</td></tr>
<tr><td>3_1</td><td>3_2</td><td>3_3</td><td>3_4</td></tr>
<tr><td>4_1</td><td>4_2</td><td>4_3</td><td>4_4</td></tr>
</tbody>
</table><br >
<input type="button" value="合并选择的" onclick="HeB()" />
<script type="text/javascript">
var tdArr=[],nowRowIndex=null;
document.onclick=function(e){
e=e||event;
var o=e.srcElement||e.target;
if(o.tagName=="TD"){
if(nowRowIndex==null){
nowRowIndex=o.parentNode.rowIndex;
o.className="focus";
tdArr.push(o);
}else if(nowRowIndex===o.parentNode.rowIndex){
if(o.className=="focus"){
remove(o);
o.className="";
}
else{
o.className="focus";
tdArr.push(o);
}
}
}
}
function remove(o){
for(var i=0;i<tdArr.length;i++){
if(tdArr[i]==o){
tdArr=tdArr.splice(i,1);
return;
}
}
}
function SortFunc(a,b){
return a.cellIndex-b.cellIndex;
}
function HeB(){
if(tdArr.length<2){
alert('请先选择合并的单元格!');
return;
}
tdArr.sort(SortFunc);
var tr=tdArr[0].parentNode,td=tdArr[0];
td.className="";
var colspan=0;
for(var i=0;i<tdArr.length;i++){
if(tdArr[i].colSpan)colspan+=parseInt(tdArr[i].colSpan);
if(i>0){
td.innerHTML+=tdArr[i].innerHTML;
tr.removeChild(tdArr[i]);
}
}
td.colSpan=colspan;
nowRowIndex=null;
tdArr=[];
}
</script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:表格合并