创建指定行数列数的表格并进行操作（针对合并拆分）
Posted kapokkopak
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建指定行数列数的表格并进行操作（针对合并拆分）相关的知识，希望对你有一定的参考价值。
首先是创建表格，
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;width: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="width:‘+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> 整体布局</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> 列布局</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> 背景色</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="width: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="width: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 }
上面的合并和拆分是有问题的。。。。修正如下：
this.mergeTd=function(){//合并 $(‘#mergeTd‘).off(‘click‘).on(‘click‘,function(){ if(that.rowSpan>1|| that.colSpan>1) {alert(‘不能对已合并单元格进行合并！‘);return that;} var row=$(‘#mergeTdRow‘).val()-0,col=$(‘#mergeTdCol‘).val()-0,str=‘‘; if($(‘.themergeone‘).length>0){ $(‘.themergeone:first‘).parents(‘table‘).siblings().find(‘.themergeone‘).removeClass(‘themergeone info‘); var mergeLast=$(‘.themergeone:last‘)[0].className.split(‘ ‘)[0].split(‘-‘), mergeFirst=$(‘.themergeone:first‘)[0].className.split(‘ ‘)[0].split(‘-‘); row=mergeLast[1]-mergeFirst[1],col=mergeLast[2]-mergeFirst[2]; } if(row==0&&col==0) return that; for(var i=0;i<row+1;i++){ str+=$(‘.td-‘+(that.startRow+i)+‘-‘+(that.startCol+col)).next()[0].className.split(‘ ‘)[0]+‘_‘; for(var j=0;j<col+1;j++){ 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;} !(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(); } if($(‘[nexttd*="td-‘+(that.startRow+i)+‘-‘+(that.startCol)+‘"]‘).length>0){ $(‘[nexttd*="td-‘+(that.startRow+i)+‘-‘+(that.startCol)+‘"]‘).each(function(index,element){ (i!=0)&&$(element).attr(‘nexttd‘,$(element).attr(‘nexttd‘).replace(‘td-‘+(that.startRow+i)+‘-‘+(that.startCol),str.split(‘_‘)[i])); }) } } that.target.attr(‘nexttd‘,str); row!=0&&that.target.attr({‘rowspan‘:(row+1)})&&(that.rowSpan=row+1); col!=0&&that.target.attr({‘colspan‘:(col+1)})&&(that.colSpan=col+1); $(‘#mergeTdRow‘).val(0)&&$(‘#mergeTdCol‘).val(0); }); return this; }; this.splitTd=function(){//拆分 $(‘#splitTd‘).off(‘click‘).on(‘click‘,function(){ if(that.rowSpan==1&&that.colSpan==1){alert(‘当前单元格不可拆分‘);return that;} that.rowSpan=that.rowSpan||1;that.colSpan=that.colSpan||1; var attrStr=that.target.attr(‘nexttd‘).split(‘_‘); that.target.removeAttr(‘rowspan‘).removeAttr(‘colspan‘).removeAttr(‘nexttd‘); for(var i=0;i<that.rowSpan;i++){ for(var j=0;j<that.colSpan;j++){ (!(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])); } if($(‘[nexttd*="‘+attrStr[i]+‘"]‘).length>0){ $(‘[nexttd*="‘+attrStr[i]+‘"]‘).each(function(index,element){ (i!=0)&&$(element).attr(‘nexttd‘,$(element).attr(‘nexttd‘).replace(attrStr[i],‘td-‘+(that.startRow+i)+‘-‘+that.startCol)); }) } } (that.rowSpan=1)&&(that.colSpan=1); }); return this; };
主要是要考虑到合并完再重新拆分的话，插入点在哪。。。
以上是关于创建指定行数列数的表格并进行操作（针对合并拆分）的主要内容，如果未能解决你的问题，请参考以下文章