Ⅰ Web前端怎样实现像excel那样的按列拖选的表格
通过flash，flex实现
FLEX 功能强大的datagrid通过jquery插件，js实现
JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素
Ⅱ Web前端怎样实现像excel那样的按列拖选的表格
Web前端实现像excel那样的按列拖选表格的方法：
1.通过flash，flex实现FLEX 功能强大的datagrid
2.通过jquery插件，js实现
JS实现可编辑的表格，双击可编辑，可以删除行和列，增加行和列，重置，导出表格，也可以上下移动元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。
Ⅲ js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）
functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX异步加载重复生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服务名称varalias=result[i].alias;//服务别名vartype=result[i].type;//服务类型varyear=result[i].year;//年份varurl=result[i].url;//服务地址varvisible=result[i].visible;//是否可见varid=result[i].id;//idserviceIdArray[i]=id;//此处将id塞给serviceIdArray，用于判断是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}
2）
//修改table行内元素(td)functioneditTd(id){//选中编辑按钮的时候,把这行指定的几个td变成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟节点if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//将编辑改成保存和取消两个按钮b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在网上找的参考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**绑定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默认为单机事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//调用可编辑this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//光标聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//这里可以写ajax内容，用于保存编辑后的内容//data:返回的数据//isSucess:方法，用于保存数据成功后，将可编辑状态变为不可编辑状态varflag=true;//ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失败");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失败");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("删除成功");}else{alert("删除失败");}}});*//*//dom创建文本框varinput=document.createElement("input");input.type="text";//得到当前的单元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根据Dimmacro的建议修定下面的bug非常感谢if(currentCell.tagName=="TD"){//用单元格的值来填充文本框的值input.value=currentCell.innerHTML;//当文本框丢失焦点时调用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到当前单元格上.currentCell.appendChild(input);//根据liu_binq63的建议修定下面的bug非常感谢input.focus();}}functionlast(){//充文本框的值给当前单元格currentCell.innerHTML=input.value;}//最后为表格绑定处理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="编辑"?"确定":"编辑";$(this).val(ttr);//按钮被点击后，在“编辑”和“确定”之间切换$(this).parent().siblings("td").each(function(){//获取当前行的其他单元格varobj_text=$(this).find("input:text");//判断单元格下是否有文本框if(!obj_text.length)//如果没有文本框，则添加文本框使之可以编辑$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已经存在文本框，则将其显示为文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}
3）
//取消editTd编辑functionresertEditTd(){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}
//保存editTd编辑functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟节点vartd_name=a[1].children[0].value;//服务名称vartd_alias=a[2].children[0].value;//服务别名vartd_type=a[3].children[0].value;//服务类型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}
});
}
Ⅳ 前端组件“可编辑表格”，怎么设计才好
第一，view层，需要分层设计；
第二，model层，需要让数据来控制view层；
思路的话，可以参考react的生命周期概念:
1，插入dom；
2，获得新数据，重新渲染dom；
3，删除dom；
咱们也一样给这三种状态各提供二种处理函数，
will是事前调用；
did是事后调用；
还要有公开出来的setget方法
Ⅳ 前端、后台对excel表格的处理
这样的需求需要通过一些专业的类Excel控件来完成，这些类Excel控件一般都会有Excel表格展示的功能，在您的系统页面中嵌入上控件之后页面中就会初始化一个Excel表格，之后控件一般都会将Excel的相关功能全部封装成对应的API，例如Excel的导入，导出，公式，图表，形状，单元格操作等。之后根据需求需要用到哪些调用相应的API就可以完成了。
所以你上面说的读进用户的Excel，其实就是导入功能，求和就是公式相关操作的一种，提取列的数据就是正常的单元格操作的其中一种。
如果你是前端导入的话，这里推荐使用SpreadJS,这个是一个纯前端的类Excel控件，可以用JavaScript语言实现上述所有的功能。
Ⅵ 如何实现在网页中在线编辑EXCEL表格,然后保存到服务器中
我跟你也有类似的需求，想要做一个系统，用户需要在系统上在线去上传编辑Excel，页面上能够有一个像Excel这样矩阵的表格可以在系统里面填报编辑，最后还需要将用户编辑的内容收录到数据库中进行存储。在网页搜索搜到了这个问题，也看了下面的回答，虽然都是些商业的推广，但我也认真的看了，这里做一个客观的总结，也可以给后面跟我有类似问题的用户一个参考：
Zoho Docs：
知道上面一搜全是他们的回答， 但是网络上根本找不到官方网站，网络经验里我看到了一张图片，里面的官方网站跟上面能够搜索到的都不一致（从一个客户角度首先对于这样网站上都搜不到官网的产品我是充满了不信任的），之后好不容易找到了官网，然后试用了产品，发现其所说的嵌入网页只是一个iframe的地址
这个看上去跟Excel外观一模一样，而且据他们客服说这个可以直接嵌入到系统并且还能在上面做二次开发，只要能将上面的表格嵌入到我的系统页面中就已经满足我的需求了，接下来我准备再测试评估一下功能与性能。
PS：
3楼的回答为什么不能详尽一些呢，明明3楼才是题主或者跟题主有着同样问题的解决方案，但是3楼说的这么少，就不能像1楼那样多说一些吗？