首页 > 代码库 > 模拟excel添加删除行或列,同时渲染各个tr td的id,以做取值进行各种运算.
模拟excel添加删除行或列,同时渲染各个tr td的id,以做取值进行各种运算.
此控件是模拟excel进行添加删除行或者列。同时可以进行各单元格之间的运算,比如=SUM(A1,A3)就表示相加,操作跟excel类似,
html代码如下:
js代码如下:
1 $("#event_table tbody,#event_div").bind("contextmenu",function(e){ //禁止鼠标右击弹出菜单 2 return false; 3 }); 4 $(document).mousedown(function(e){ //左击任意位置隐藏自定义菜单 5 if(1 == e.which){ 6 if($(e.target)[0].id==‘addrow‘||$(e.target)[0].id==‘addcol‘||$(e.target)[0].id==‘delcol‘||$(e.target)[0].id==‘delrow‘) 7 { 8 return false; 9 }else{10 $(‘#event_div‘).css(‘display‘,‘none‘);11 };12 };13 });14 var celindex;15 var rowindex;16 var headNub = new Array();17 headNub = [‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘];18 var event_divFn = function(e){ //右击鼠标,自定义菜单显示位置,同时获取当前点击的单元格19 if(3 == e.which){20 var pointX = e.pageX;21 var pointY = e.pageY;22 $(‘#event_div‘).css(‘display‘,‘block‘);23 $(‘#event_div‘).css(‘left‘,pointX);24 $(‘#event_div‘).css(‘top‘,pointY);25 celindex = $(e.target)[0].cellIndex;26 rowindex = $(e.target).parent()[0].rowIndex;27 };28 };29 var autoFn = function(){ //渲染整个table tr td的id30 for (var l = 0; l < $(‘#event_table tbody tr‘).length; l++) {31 $($(‘#event_table tbody tr‘)[l]).attr(‘id‘,‘row_‘+(l+1));32 $($(‘#event_table tbody tr td:first-child‘)[l]).attr(‘class‘,‘td-hev fixed‘);33 $($(‘#event_table tbody tr td:first-child‘)[l]).css(‘text-align‘,‘center‘);34 $($(‘#event_table tbody tr td:first-child‘)[l]).html(l+1);35 for (var m = 0; m < $($(‘#event_table tbody tr‘)[l]).children().length; m++) {36 $($($(‘#event_table tbody tr‘)[l]).children().not(‘.fixed‘)[m]).attr(‘id‘,headNub[m]+(l+1));37 };38 };39 for (var p = 0; p < $(‘#event_table thead td‘).not(‘.frist_td‘).length; p++) {40 $($(‘#event_table thead td‘).not(‘.frist_td‘)[p]).attr(‘id‘,‘col_‘+headNub[p]);41 $($(‘#event_table thead td‘).not(‘.frist_td‘)[p]).html(headNub[p]);42 $($(‘#event_table thead td‘).not(‘.frist_td‘)[p]).css(‘text-align‘,‘center‘);43 };44 };45 $("#event_table tbody").mousedown(event_divFn);46 $(‘#addrow‘).click(function(){ //插入行47 tdHtml = ‘‘;48 for (var j = 0; j < $($(‘#event_table tr‘)[rowindex]).children().length; j++) {49 tdHtml+=‘<td style="text-align:left;">add</td>‘50 };51 $($(‘#event_table tr‘)[rowindex]).after(‘<tr>‘+tdHtml+‘</td>‘);52 autoFn();53 $(‘#event_div‘).css(‘display‘,‘none‘);54 });55 $(‘#addcol‘).click(function(){ //插入列56 for (var i = 0; i < $(‘#event_table tr‘).length; i++) {57 $($($(‘#event_table tr‘)[i]).children()[celindex]).after(‘<td style="text-align:left;">add</td>‘);58 };59 autoFn();60 $(‘#event_div‘).css(‘display‘,‘none‘);61 });62 $(‘#delrow‘).click(function(){ //删除行63 $($(‘#event_table tr‘)[rowindex]).remove();64 autoFn();65 $(‘#event_div‘).css(‘display‘,‘none‘);66 });67 $(‘#delcol‘).click(function(){ //删除列68 for (var i = 0; i < $(‘#event_table tr‘).length; i++) {69 $($($(‘#event_table tr‘)[i]).children()[celindex]).remove();70 };71 autoFn();72 $(‘#event_div‘).css(‘display‘,‘none‘);73 });
模拟excel添加删除行或列,同时渲染各个tr td的id,以做取值进行各种运算.
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。