表格合并

点击单元格选择需要合并的,暂时只能合并同一行的
+展开
-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> 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:表格合并

评论(0)Web开发网
阅读(95)喜欢(0)JavaScript/Ajax开发技巧