zoukankan      html  css  js  c++  java
  • 创建指定行数列数的表格并进行操作(针对合并拆分)

    首先是创建表格,

    html部分:

     1 <div class="modal-body">
     2   <div style="margin: 0 auto;" class="form-inline" id="createTableModeRowAndRol">
     3         新建 <input type="text" class="form-control input-sm" autofocus="autofocus" id="createTableModeRowNum" autofocus="autofocus" onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')"> 4             <div class="btn-group">
     5                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="createTableModeRolNum"> 4 <span class="caret"></span></button>
     6                  <ul class="dropdown-menu" role="menu" id="createTableModeRolNumSize">
     7                       <li><a href="#">1</a></li>
     8                       <li><a href="#">2</a></li>
     9                       <li><a href="#">3</a></li>
    10                       <li><a href="#">4</a></li>
    11                       <li><a href="#">5</a></li>
    12                       <li><a href="#">6</a></li>
    13                       <li><a href="#">7</a></li>
    14                       <li><a href="#">8</a></li>
    15                  </ul>
    16             </div>
    17        列,列高 <input type="text" id="createTableModeRolHeight" class="form-control input-sm" placeholder="默认52px"> 的表格
    18    </div>
    19 </div>
    20 <div class="modal-footer">
    21     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    22     <button type="button" class="btn btn-primary" data-dismiss="modal" id="createTableModeMakeSure">确认</button>
    23 </div>

    js:

     1 function createTableOrMergeTd (){
     2     var rowNum=Number($('#createTableModeRowNum')[0].value),rolNum=Number($('#createTableModeRolNum')[0].innerText.slice(0));
     3     if(rowNum>0 && rolNum>0){
     4         var html=['<table class="createtable-'+rowNum+'-'+rolNum+'-'+createTable+' table-bordered table create-table" style="margin-bottom:0;100%;-moz-user-select:none;-webkit-user-select:none;user-select:none;" ><thead><tr>'],wid=($('#contern_grid').width()-1)/rolNum+'px',hei=($('#createTableModeRolHeight')[0].value-0)||52;
     5         for(var j=0;j<rolNum;j++){
     6             html.push('<th style="'+wid+';position:relative;top:-1000px;border-bottom:0;"></th>');
     7         }
     8         html.push('</tr></thead><tbody class="create-table-tbody">');
     9         for(var i=0;i<rowNum;i++){
    10             html.push('<tr style="height:'+hei+'px;" class="create-table-tr">');
    11             for(var j=0;j<rolNum;j++){
    12                 html.push('<td class="td-'+i+'-'+j+' create-table-td"></td>');
    13             }
    14             html.push('</tr>');
    15         }
    16         html.push('</tbody></table>');
    17         
    18         $('#contern_grid').append(html.join('')).find('.td-0-0').click();
    19         if($('#contern_grid').children(':last').prev().hasClass('create-table'))$('#contern_grid').children(':last').css('margin-top','-14px');
    20     }
    21 }
    22 $('#createTableModeMakeSure').on('click',function(){
    23     createTableOrMergeTd ();
    24 });
    25 $('#createTableMode').keydown(function(e){
    26     e=e||window.event;
    27     if(e.keyCode==13){
    28         createTableOrMergeTd();
    29         $('#createTableMode').modal('hide');
    30     }
    31 });

    下面是对表格的操作:

    html:

     1 <div id="createTableProperties" class="row">
     2     <div class="quality" style="display:block;"><a href="javascript: void(0);"><i class="fa fa-caret-down"></i>&nbsp;&nbsp;整体布局</a></div>
     3     <div class="quality_contern">
     4         <div class="form-group-prop form-group"> <label class="label_property"> 线条可见 </label> <div class="controls"> <div class="radio checkbox-inline" style="margin-top: 5px;"> <label for="createTableIsLine1" style="margin-right: 24px;"> <input id="createTableIsLine1" style="margin-top:-2px;" type="radio" name="createTableIsLine" value="1"> <span></span> </label> <label for="createTableIsLine2" style="margin-right: 24px;"> <input id="createTableIsLine2" style="margin-top:-2px;" type="radio" name="createTableIsLine" value="0"> <span></span> </label> </div> </div></div>
     5         <div class="form-group form-group-prop"><label class="label_property">线宽</label><div class="controls" style="padding-right:50px;position:relative;"><input type="text" id="createTableLineWidth"  class="form-control" placeholder="默认单位:1px" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"><button type="button" class="btn btn-primary btn-xs" id="createTableChangeLineWidth" style="position:absolute;right:7px;top:2px">替换</button></div></div>
     6         <div class="form-group form-group-prop" id="createtableColWid"><label class="label_property">列宽</label></div>
     7         <div class="form-group form-group-prop"><label class="label_property"></label><div class="controls"><button type="button" class="btn btn-primary btn-xs" style="margin-right:5px;" id="createtableChangeColWid">修改</button></div></div>
     8     </div>
     9     <div class="quality" style="display:block;"><a href="javascript: void(0);"><i class="fa fa-caret-down"></i>&nbsp;&nbsp;列布局</a></div>
    10     <div class="quality_contern">
    11         <div class="form-group form-group-prop"><label class="label_property">向下合并</label><div class="controls"><select class="form-control input-sm" id="mergeTdRow"></select></div></div>
    12         <div class="form-group form-group-prop"><label class="label_property">向右合并</label><div class="controls"><select class="form-control input-sm" id="mergeTdCol"></select></div></div>
    13         <div class="form-group form-group-prop"><label class="label_property"></label><div class="controls"><button type="button" class="btn btn-primary btn-xs" style="margin-right:5px;" id="mergeTd">合并</button><button type="button" class="btn btn-primary btn-xs" style="margin-right:5px;" id="splitTd">拆分</button></div></div>
    14         <div class="form-group form-group-prop"><label class="label_property">当前行高</label><div class="controls" style="padding-right:50px;position:relative;"><input type="text" id="createTableTdHei"  class="form-control" placeholder="若为0,则删除当前行" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"><button type="button" class="btn btn-primary btn-xs" id="createTableChangeWidOrHei" style="position:absolute;right:7px;top:2px">修改</button></div></div>
    15         <div class="form-group form-group-prop"><label class="label_property"></label><div class="controls"><button type="button" class="btn btn-primary btn-xs" style="margin-right:5px;" id="delRow">删除当前行</button><button type="button" class="btn btn-primary btn-xs" id="delCol">删除当前列</button></div></div>
    16     </div>
    17     <div class="quality" style="display:block;"><a href="javascript: void(0);"><i class="fa fa-caret-down"></i>&nbsp;&nbsp;背景色</a></div>
    18     <div class="quality_contern" id="createTableChangeBackgroundColor">
    19         <div class="form-group form-group-prop"><label class="label_property">当前格</label><div class="controls" style="padding-right:50px;position:relative;"><select class="form-control input-sm" id="createTableChangeBackgroundColorTd"><option value=''></option><option value='create-table-td'>透明</option><option value='active'>浅灰色</option><option value='success'>浅绿色</option><option value='info'>浅蓝色</option><option value='warning'>浅黄色</option><option value='danger'>浅红色</option></select></div></div>
    20         <div class="form-group form-group-prop"><label class="label_property">当前行</label><div class="controls" style="padding-right:50px;position:relative;"><select class="form-control input-sm" id="createTableChangeBackgroundColorRow"><option value=''></option><option value=''>透明</option><option value='active'>浅灰色</option><option value='success'>浅绿色</option><option value='info'>浅蓝色</option><option value='warning'>浅黄色</option><option value='danger'>浅红色</option></select></div></div>
    21         <div class="form-group form-group-prop"><label class="label_property">当前列</label><div class="controls" style="padding-right:50px;position:relative;"><select class="form-control input-sm" id="createTableChangeBackgroundColorCol"><option value=''></option><option value=''>透明</option><option value='active'>浅灰色</option><option value='success'>浅绿色</option><option value='info'>浅蓝色</option><option value='warning'>浅黄色</option><option value='danger'>浅红色</option></select></div></div>
    22     </div>
    23 </div>

    js部分:

      1 function CreateTable(target,startRow,startCol,rowAll,colAll,rowSpan,colSpan){
      2     this.target=target;//当前单元格
      3     this.startRow=startRow;//位于第几行
      4     this.startCol=startCol;//位于第几列
      5     this.rowAll=rowAll;//表格一共几行
      6     this.colAll=colAll;//表格一共几列
      7     this.rowSpan=rowSpan;//当前单元格跨几行
      8     this.colSpan=colSpan;//当前单元格跨几列
      9     this.wid=0;//用于存储合并前的列宽
     10     this.hei=[];//用于存储合并前的行高
     11     this.lineWid=1;
     12     this.flag=false;
     13     this.classArr=['info','success','active','danger','warning'];
     14     var that=this;
     15     this.init=function(){
     16         for(var i=0,parents=that.target.parents('table'),children=parents.find('th'),html=[];i<children.length;i++){
     17             if(i%2==0) html.push('<div class="controls"><input type="text" class="form-control no-change" style="46.5%;display:inline-block;margin-right:4%;" value="'+$(children[i]).outerWidth()+'">');
     18             if(i%2==1) html.push('<input type="text" class="form-control no-change" style="46.5%;display:inline-block;" value="'+$(children[i]).outerWidth()+'"></div>');
     19             if(i==children.length&&children.length%2==1) html.push('</div>');
     20             this.wid+=$(children[i]).outerWidth();
     21         }
     22         for(i=0;i<this.classArr.length;i++){
     23             if(this.target.hasClass(this.classArr[i])) {
     24                 $('#createTableChangeBackgroundColorTd').val(this.classArr[i])&&(this.flag=true);
     25                 break;
     26             }
     27         }
     28         !this.flag&&$('#createTableChangeBackgroundColorTd').val('');
     29         $('#createtableColWid').html('').append('<label class="label_property">列宽</label>').append(html.join('')).find('input').each(function(){
     30             $(this).off('keyup').on('keyup',function(){
     31                 if(isNaN(this.value))execCommand('undo');
     32                 //if($(this).val()-0<17) alert('列宽不能小于17')&&$(this).val(17);
     33                 $(this).removeClass('no-change').addClass('has-change');
     34                 for(var i=0,changes=$('#createtableColWid input.has-change'),wid=0;i<changes.length;i++){
     35                     wid+=$(changes[i]).val()-0;
     36                 }
     37                 var val=(that.wid-wid)%($('#createtableColWid input.no-change').length),valu=(that.wid-wid-val)/($('#createtableColWid input.no-change').length);
     38                 for(i=0,changes=$('#createtableColWid input.no-change');i<changes.length;i++){
     39                     $(changes[i]).val(valu+(i<val?1:0));
     40                 }
     41             }).off('afterpaste').on('afterpaste',function(){
     42                 if(isNaN(this.value))execCommand('undo');
     43             })
     44         });
     45         $('#createTableTdHei').val(that.target.outerHeight());
     46         return this;
     47     }
     48     this.changeLine=function(){//是否显示边框
     49         $('input[name="createTableIsLine"]').off('click').on('click',function(){
     50             var value=that.lineWid||1;
     51             !!(this.value-0)?that.target.parents('table').addClass('table-bordered').find('td').css('border',value+'px solid #ddd'):that.target.parents('table').removeClass('table-bordered').css('border','0').find('td').css('border','0');
     52         });
     53         return this;
     54     };
     55     this.lineWidth=function(){//线宽
     56         $('#createTableChangeLineWidth').off('click').on('click',function(){
     57             var value=that.lineWid=$("#createTableLineWidth").val()||1;
     58             that.target.parents('table').css('border',value+'px solid #ddd').find('td').css('border',value+'px solid #ddd');
     59         });
     60         return this;
     61     };
     62     this.changeColWid=function(){//修改列宽
     63         $('#createtableChangeColWid').off('click').on('click',function(){
     64             for(var i=0,inputs=$('#createtableColWid input');i<inputs.length;i++){
     65                 if(inputs[i].value<17){alert('列宽至少要有17px');return;}
     66             }
     67             for(i=0,ths=that.target.parents('table').find('th');i<that.colAll;i++){
     68                 $(ths[i]).outerWidth($(inputs[i]).val());
     69             }
     70         });
     71         return this;
     72     }
     73     this.mergeTdNum=function(){//可合并行数列数
     74         var html=[];
     75         for(var i=0;i<this.rowAll-this.startRow;i++){
     76             html.push('<option value="'+i+'">'+i+'</option>');
     77         }
     78         $('#mergeTdRow').html('').append(html);
     79         for(i=0,html=[];i<this.colAll-this.startCol;i++){
     80             html.push('<option value="'+i+'">'+i+'</option>');
     81         }
     82         $('#mergeTdCol').html('').append(html);
     83         return this;
     84     };
     85     this.mergeTd=function(){//合并
     86         $('#mergeTd').off('click').on('click',function(){
     87             if(that.rowSpan>1|| that.colSpan>1) {alert('不能对已合并单元格进行合并!');return that;}
     88             var row=$('#mergeTdRow').val()-0,col=$('#mergeTdCol').val()-0;
     89             if($('.themergeone').length>0){ 
     90                 var mergeLast=$('.themergeone:last')[0].className.split(' ')[0].split('-'),
     91                     mergeFirst=$('.themergeone:first')[0].className.split(' ')[0].split('-');
     92                 row=mergeLast[1]-mergeFirst[1],col=mergeLast[2]-mergeFirst[2];
     93             }
     94             if(row==0&&col==0) return that;
     95             for(var i=0;i<row+1;i++){
     96                 for(var j=0;j<col+1;j++){
     97                     if(that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).attr('colspan')>1||that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).attr('rowspan')>1){alert('不能合并已合并单元格!');return that;}
     98                     !(i==0&&j==0)&&that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j))&&that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).remove();
     99                 }
    100             }
    101             row!=0&&that.target.attr({'rowspan':(row+1)})&&(that.rowSpan=row+1);
    102             col!=0&&that.target.attr({'colspan':(col+1)})&&(that.colSpan=col+1);
    103             $('#mergeTdRow').val(0)&&$('#mergeTdCol').val(0);
    104         });
    105         return this;
    106     };
    107     this.splitTd=function(){//拆分
    108         $('#splitTd').off('click').on('click',function(){
    109             if(that.rowSpan==1&&that.colSpan==1){alert('当前单元格不可拆分');return that;}
    110               //var theone=$('.info'),colNum=theone.parents('table')[0].className.split(' ')[0].split('-')[2],wid=100/(colNum);
    111               //var startRow=theone[0].className.split(' ')[0].split('-')[1]-0,startCol=theone[0].className.split(' ')[0].split('-')[2]-0,rowspan=theone.attr('rowspan')-0||1,colspan=theone.attr('colspan')-0||1;
    112             that.rowSpan=that.rowSpan||1;that.colSpan=that.colSpan||1;
    113               if(that.colSpan+that.startCol==that.colAll){
    114                   for(var i=0;i<that.rowSpan;i++){
    115                     for(var j=0;j<that.colSpan;j++){
    116                         !(i==0&&j==0)
    117                             &&that.target.parents('tbody').find('tr:eq('+(that.startRow+i)+')').append('<td class="td-'+(that.startRow+i)+'-'+(that.startCol+j)+' create-table-td ui-sortable"></td>');
    118                     }
    119                   }
    120               }else if(that.startCol==that.colAll-1){
    121                 for(var i=0;i<that.rowSpan;i++){
    122                     for(var j=0;j<=that.colSpan;j++){
    123                         !(i==0&&j==0)&&that.target.parents('tbody').find('tr:eq('+(that.startRow+i)+')').append('<td class="td-'+(that.startRow+i)+'-'+(that.startCol+j)+' create-table-td ui-sortable"></td>');
    124                     }
    125                   }
    126               }else{
    127                        for(var i=0;i<that.rowSpan;i++){
    128                            for(var j=0;j<that.colSpan;j++){
    129                                (!(i==0&&j==0))
    130                                    &&$('<td class="td-'+(that.startRow+i)+'-'+(that.startCol+j)+' create-table-td ui-sortable">').insertBefore(that.target.parents('tbody').find('.td-'+(i+that.startRow)+'-'+(that.colSpan+that.startCol)));
    131                            }
    132                        }
    133               }
    134               (that.rowSpan=1)&&(that.colSpan=1);
    135               that.target.removeAttr('rowspan').removeAttr('colspan');
    136               /**
    137                * 容器类类拖拽拖拽
    138                */
    139               $("#design-canvas .create-table-td").sortable({
    140                 revert : true,
    141                 stop : function(event, ui) {//每次容器类拖拽到面板都需要重新初始化
    142                     stopEvent(event, ui);
    143                 }
    144               });
    145               setDraggable();
    146         });
    147         return this;
    148     };
    149     this.del=function(){//删除
    150         $('#delRow').off('click').on('click',function(){
    151             var target=that.target.parents('tr').next()?
    152                     (that.target.parents('tr').next().children('td:eq(0)')):
    153                     (that.target.parents('tr').prev()?
    154                             that.target.parents('tr').prev().children('td:eq(0)'):
    155                             that.target.parents('table').find('td:eq(0)'));
    156             confirm('是否删除当前行?')&&that.target.parents('tr').remove()&&target.click();
    157         });
    158         $('#delCol').off('click').on('click',function(){
    159             var target=that.target.next()?that.target.next():that.target.prev()?that.target.prev():that.target.parents('table').find('td:eq(0)');
    160             !!confirm('确定要删除当前列吗?')
    161                 &&that.target.parents('table').find('th:eq('+that.startCol+')').remove()
    162                 &&that.target.parents('table').find('tr').find('td:eq('+that.startCol+')').remove()
    163                 &&target.click();
    164             
    165         })
    166         return this;
    167     };
    168     this.changeWidOrHei=function(){//改变当前列宽,当前行高
    169         $('#createTableChangeWidOrHei').off('click').on('click',function(){
    170             var hei;
    171             $('#createTableTdHei').val()-0<13?(hei=13&&alert('行高不能小于13')):(hei=$('#createTableTdHei').val()-0);
    172             that.target.parents('tbody').find('tr:eq('+that.startRow+')').outerHeight(hei);
    173         })
    174         return this;
    175     };
    176     this.changeBackgroundcolor=function(){//改变背景颜色
    177         $('#createTableChangeBackgroundColorTd').off('change').on('change',function(){
    178             that.removeClass(that.target).addClass($(this).val());
    179         })
    180         $('#createTableChangeBackgroundColorRow').val('').off('change').on('change',function(){
    181             that.removeClass(that.target.parents('tr').find('td')).addClass($(this).val());
    182             $('#createTableChangeBackgroundColorTd').val($(this).val());
    183         })
    184         $('#createTableChangeBackgroundColorCol').val('').off('change').on('change',function(){
    185             for(var i=0;i<that.rowAll;i++){
    186                 that.removeClass(that.target.parents('table').find('.td-'+i+'-'+that.startCol)).addClass($(this).val())
    187             }
    188             $('#createTableChangeBackgroundColorTd').val($(this).val());
    189             //that.target.parents('table').find('tr').find('td:eq('+that.startCol+')').css('background-color','#'+$('#createTableBackgroundColorCol').val());
    190         })
    191         return this;
    192     };
    193     this.removeClass=function(target){;
    194         for(var i=0;i<this.classArr.length;i++){
    195             for(var j=0;j<target.length;j++){
    196                 $(target[j]).removeClass(this.classArr[i]);
    197             }
    198         }
    199         return target;
    200     }
    201 }
    202 var createTableDrag={
    203         theFirstOne:'',
    204         drag:false,
    205         td_StartR:0,
    206         td_StartC:0,
    207         td_EndR:0,
    208         td_EndC:0,
    209         iTr:0,
    210         eTr:0,
    211         iTd:0,
    212         eTd:0
    213 };
    214 $(document).on("mousedown",".create-table-td",function(){
    215     var startRow=$(this)[0].className.split(' ')[0].split('-')[1]-0,startCol=$(this)[0].className.split(' ')[0].split('-')[2]-0,
    216     tableAll=$(this).parents('table')[0].className.split(' ')[0].split('-'),rowAll=tableAll[1]-0,colAll=tableAll[2]-0,
    217     rowSpan=$(this).attr('rowspan')-0||1,colSpan=$(this).attr('colspan')-0||1;
    218     $('.bg-primary').removeClass('bg-primary')&&$(this).addClass('bg-primary')
    219     var table=new CreateTable($(this),startRow,startCol,rowAll,colAll,rowSpan,colSpan);
    220     var dragTable=table.init().changeLine().lineWidth().changeColWid().mergeTdNum().mergeTd().splitTd().del().changeWidOrHei().changeBackgroundcolor();
    221     $('#columnproperties').hide().next().show().children().show();
    222     table=null;
    223     createTableDrag.td_EndR = createTableDrag.td_StartR = $(this)[0].className.split(' ')[0].split('-')[1]-0;
    224     createTableDrag.td_EndC = createTableDrag.td_StartC = $(this)[0].className.split(' ')[0].split('-')[2]-0;
    225     createTableDrag.drag = true;
    226 }).on("mouseenter",".create-table-td",function(event){
    227     if(createTableDrag.drag){
    228         if( event.which != 1){
    229             return false;
    230         }
    231         createTableDrag.td_EndR = $(this)[0].className.split(' ')[0].split('-')[1]-0;
    232         createTableDrag.td_EndC = $(this)[0].className.split(' ')[0].split('-')[2]-0;
    233         $(this).parents('table:eq(0)').find('td').removeClass("info themergeone");
    234         createTableDrag.iTr = createTableDrag.td_StartR <createTableDrag.td_EndR ? createTableDrag.td_StartR : createTableDrag.td_EndR,
    235         createTableDrag.eTr = createTableDrag.td_StartR > createTableDrag.td_EndR ? createTableDrag.td_StartR : createTableDrag.td_EndR,
    236         createTableDrag.iTd = createTableDrag.td_StartC < createTableDrag.td_EndC ? createTableDrag.td_StartC : createTableDrag.td_EndC,
    237         createTableDrag.eTd = createTableDrag.td_StartC > createTableDrag.td_EndC ? createTableDrag.td_StartC : createTableDrag.td_EndC;
    238         for(var iTr1 = createTableDrag.iTr;iTr1<=createTableDrag.eTr;iTr1++){
    239             for(var iTd1 = createTableDrag.iTd;iTd1<=createTableDrag.eTd;iTd1++){
    240                 var td = $(this).parents('tbody').find(".td-"+iTr1+"-"+iTd1);
    241                 if($(this).attr('rowSpan')-0>1||$(this).attr('cowSpan')-0>1){
    242                     //alert('不能对已合并单元格进行合并');
    243                     createTableDrag.drag = false;
    244                     $(this).parents('table:eq(0)').find('td').removeClass("info themergeone");
    245                     return
    246                 }
    247                 td.addClass("info themergeone");
    248             }
    249         }
    250         createTableDrag.theFirstOne=$('.themergeone:first');
    251     }
    252 }).on("mouseup",'.create-table-td',function(e){
    253     if(createTableDrag.drag){
    254         createTableDrag.drag = false;
    255         return false;
    256     }
    257 })
    258 $(document).on("click",".create-table-td",function(event){ //设置左边选项卡的切换
    259     event = event||window.event;
    260     var theone=$(event.target)||$(event.srcElement);
    261     var startRow=theone[0].className.split(' ')[0].split('-')[1]-0,startCol=theone[0].className.split(' ')[0].split('-')[2]-0,
    262     tableAll=theone.parents('table')[0].className.split(' ')[0].split('-'),rowAll=tableAll[1]-0,colAll=tableAll[2]-0,
    263     rowSpan=theone.attr('rowspan')-0||1,colSpan=theone.attr('colspan')-0||1;
    264     $('.bg-primary').removeClass('bg-primary')&&theone.addClass('bg-primary')
    265     var table=new CreateTable(theone,startRow,startCol,rowAll,colAll,rowSpan,colSpan);
    266     table.init().changeLine().lineWidth().changeColWid().mergeTdNum().mergeTd().splitTd().del().changeWidOrHei().changeBackgroundcolor();
    267     table=null;
    268 }

    上面的合并和拆分是有问题的。。。。修正如下:

      1 this.mergeTd=function(){//合并
      2     $('#mergeTd').off('click').on('click',function(){
      3         if(that.rowSpan>1|| that.colSpan>1) {alert('不能对已合并单元格进行合并!');return that;}
      4         var row=$('#mergeTdRow').val()-0,col=$('#mergeTdCol').val()-0,str='';
      5         if($('.themergeone').length>0){ 
      6             var mergeLast=$('.themergeone:last')[0].className.split(' ')[0].split('-'),
      7                 mergeFirst=$('.themergeone:first')[0].className.split(' ')[0].split('-');
      8             row=mergeLast[1]-mergeFirst[1],col=mergeLast[2]-mergeFirst[2];
      9         }
     10         if(row==0&&col==0) return that;
     11         for(var i=0;i<row+1;i++){
     12             str+=$('.td-'+(that.startRow+i)+'-'+(that.startCol+col)).next()[0].className.split(' ')[0]+'_';
     13             for(var j=0;j<col+1;j++){
     14                 if(that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).attr('colspan')>1||that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).attr('rowspan')>1){alert('不能合并已合并单元格!');return that;}
     15                 !(i==0&&j==0)&&that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j))&&that.target.parents('tbody').find('.td-'+(that.startRow+i)+'-'+(that.startCol+j)).remove();
     16                 
     17             }
     18             if($('[nexttd*="td-'+(that.startRow+i)+'-'+(that.startCol)+'"]').length>0){
     19                 $('[nexttd*="td-'+(that.startRow+i)+'-'+(that.startCol)+'"]').each(function(index,element){
     20                     (i!=0)&&$(element).attr('nexttd',$(element).attr('nexttd').replace('td-'+(that.startRow+i)+'-'+(that.startCol),str.split('_')[i]));
     21                 })
     22             }
     23         }
     24         that.target.attr('nexttd',str).addClass('mergeoneFlag');
     25         row!=0&&that.target.attr({'rowspan':(row+1)})&&(that.rowSpan=row+1);
     26         col!=0&&that.target.attr({'colspan':(col+1)})&&(that.colSpan=col+1);
     27         $('#mergeTdRow').val(0)&&$('#mergeTdCol').val(0);
     28     });
     29     return this;
     30 };
     31 this.splitTd=function(){//拆分
     32     $('#splitTd').off('click').on('click',function(){
     33         
     34         if($('.mergeoneFlag.themergeone').length>1){
     35             $('.mergeoneFlag').each(function(index,element){
     36                 that.rowSpan=$(element).attr('rowSpan')-0||1,
     37                 that.colSpan=$(element).attr('colSpan')-0||1,
     38                 that.target=$(element),
     39                 that.startRow=that.target[0].className.split(' ')[0].split('-')[1]-0,
     40                 that.startCol=that.target[0].className.split(' ')[0].split('-')[2]-0;
     41                 var attrStr=that.target.attr('nexttd').split('_'); 
     42                 that.target.removeAttr('rowspan').removeAttr('colspan').removeAttr('nexttd').removeClass('mergeoneFlag');
     43                 for(var i=0;i<that.rowSpan;i++){
     44                     for(var j=0;j<that.colSpan;j++){
     45                         (!(i==0&&j==0))&&$('<td class="td-'+(that.startRow+i)+'-'+(that.startCol+j)+' create-table-td ui-sortable">').insertBefore(that.target.parents('table').find('.'+attrStr[i]));
     46                     }
     47                     if($('[nexttd*="'+attrStr[i]+'"]').length>0){
     48                         $('[nexttd*="'+attrStr[i]+'"]').each(function(index,element){
     49                             if($(element)[0].className.split(' ')[0].split('-')[2]-0>that.startCol) return;
     50                             (i!=0)&&$(element).attr('nexttd',$(element).attr('nexttd').replace(attrStr[i],'td-'+(that.startRow+i)+'-'+that.startCol));
     51                         })
     52                     }
     53                 }
     54                 (that.rowSpan=1)&&(that.colSpan=1);
     55             })
     56         }else if($('.mergeoneFlag.themergeone').length>0){
     57             that.rowSpan=that.rowSpan||1;that.colSpan=that.colSpan||1;
     58             var attrStr=that.target.attr('nexttd').split('_'); 
     59             that.target.removeAttr('rowspan').removeAttr('colspan').removeAttr('nexttd').removeClass('mergeoneFlag');
     60             for(var i=0;i<that.rowSpan;i++){
     61                 for(var j=0;j<that.colSpan;j++){
     62                     (!(i==0&&j==0))&&$('<td class="td-'+(that.startRow+i)+'-'+(that.startCol+j)+' create-table-td ui-sortable">').insertBefore(that.target.parents('table').find('.'+attrStr[i]));
     63                 }
     64                 if($('[nexttd*="'+attrStr[i]+'"]').length>0){
     65                     $('[nexttd*="'+attrStr[i]+'"]').each(function(index,element){
     66                         if($(element)[0].className.split(' ')[0].split('-')[2]-0>that.startCol) return;
     67                         (i!=0)&&$(element).attr('nexttd',$(element).attr('nexttd').replace(attrStr[i],'td-'+(that.startRow+i)+'-'+that.startCol));
     68                     })
     69                 }
     70             }
     71             (that.rowSpan=1)&&(that.colSpan=1);
     72         }else if(that.rowSpan==1&&that.colSpan==1){alert('当前单元格不可拆分');return that;}
     73     return this;
     74 };
     75 $(document).on("mousedown",".create-table-td",function(){
     76     createTableDrag.td_EndR = createTableDrag.td_StartR = $(this)[0].className.split(' ')[0].split('-')[1]-0;
     77     createTableDrag.td_EndC = createTableDrag.td_StartC = $(this)[0].className.split(' ')[0].split('-')[2]-0;
     78     createTableDrag.drag = true;
     79 }).on("mouseenter",".create-table-td",function(event){
     80     if(createTableDrag.drag){
     81         if( event.which != 1){
     82             return false;
     83         }
     84         createTableDrag.td_EndR = $(this)[0].className.split(' ')[0].split('-')[1]-0;
     85         createTableDrag.td_EndC = $(this)[0].className.split(' ')[0].split('-')[2]-0;
     86         $(this).parents('table:eq(0)').find('td').removeClass("info themergeone");
     87         createTableDrag.iTr = createTableDrag.td_StartR <createTableDrag.td_EndR ? createTableDrag.td_StartR : createTableDrag.td_EndR,
     88         createTableDrag.eTr = createTableDrag.td_StartR > createTableDrag.td_EndR ? createTableDrag.td_StartR : createTableDrag.td_EndR,
     89         createTableDrag.iTd = createTableDrag.td_StartC < createTableDrag.td_EndC ? createTableDrag.td_StartC : createTableDrag.td_EndC,
     90         createTableDrag.eTd = createTableDrag.td_StartC > createTableDrag.td_EndC ? createTableDrag.td_StartC : createTableDrag.td_EndC;
     91         for(var iTr1 = createTableDrag.iTr;iTr1<=createTableDrag.eTr;iTr1++){
     92             for(var iTd1 = createTableDrag.iTd;iTd1<=createTableDrag.eTd;iTd1++){
     93                 var td = $(this).parents('tbody').find(".td-"+iTr1+"-"+iTd1);
     94                 td.addClass("info themergeone");
     95             }
     96         }
     97         createTableDrag.theFirstOne=$('.themergeone:first');
     98     }
     99 }).on("mouseup",'.create-table-td',function(e){
    100     if(createTableDrag.drag){
    101         createTableDrag.drag = false;
    102         e.stopPropagation();
    103 //        
    104         if($('.themergeone').length>0){
    105             if($('.themergeone:first').parents('table')[0].className!=$('.themergeone:last').parents('table')[0].className){
    106                 alert('跨界啦,不能同时包含两个或以上的table啦!!');
    107                 $('.themergeone:last').parents('table').siblings('.create-table').find('.themergeone').removeClass('themergeone info');
    108             }
    109             var startRow=$('.themergeone')[0].className.split(' ')[0].split('-')[1]-0,startCol=$('.themergeone')[0].className.split(' ')[0].split('-')[2]-0,
    110             tableAll=$('.themergeone').parents('table')[0].className.split(' ')[0].split('-'),rowAll=tableAll[1]-0,colAll=tableAll[2]-0,
    111             rowSpan=$('.themergeone').attr('rowspan')-0||1,colSpan=$('.themergeone').attr('colspan')-0||1;
    112             $('.bg-primary').removeClass('bg-primary')&&$(this).addClass('bg-primary')
    113             var table=new CreateTable($('.themergeone'),startRow,startCol,rowAll,colAll,rowSpan,colSpan);
    114             var dragTable=table.init().changeLine().lineWidth().changeColWid().mergeTdNum().mergeTd().splitTd().del().changeWidOrHei().changeBackgroundcolor();
    115             $('#columnproperties').hide().next().show().children().show();
    116             table=null;
    117         }
    118         return false;
    119     }
    120 })

    主要是要考虑到合并完再重新拆分的话,插入点在哪。。。

  • 相关阅读:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    php使用 _before_index() 来实现访问页面前,判断登录
    php使用 _before_index() 来实现访问页面前,判断登录
    查询方式实例演示
    查询方式实例演示
    haproxy timeout server 46000 后台超时时间
    haproxy timeout server 46000 后台超时时间
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
  • 原文地址:https://www.cnblogs.com/lijia-kapok/p/7942371.html
Copyright © 2011-2022 走看看