JQ-表格实时编辑–修正版

由前端开发者 · 2018年11月6日16:09:24

摘要：html 代码 <!DOCTYPE html> <html> <head> <b……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <html> <head> <meta charset=”UTF-8″> <title></title> <script src=”http://cdn.bootcss.com/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>/3.1.1/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></script> <!–<script src=”<a href="https://www.rokub.com/category/javascript" title="js">js</a>/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>-3.1.1.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></script>–> </head> <body> <input type=”text” name=”t1″ id=”t1″ placeholder=”请输入rows” style=”height: 30px;”/> <input type=”text” name=”t2″ id=”t2″ placeholder=”请输入cols” style=”height: 30px;”/> <input type=”button” name=”b1″ id=”b1″ value=”生成表格” style=”height: 30px;”/> <div></div> <script type=”text/javascript”> $(“div”).append(“<table></table>”); $(“input[name=’b1′]”).click(function(){ $(“table”).html(“”).<a href="https://www.rokub.com/category/css" title="css">css</a>(“borderCollapse”,”collapse”) var rows=$(“#t1”).val(); var cols=$(“#t2”).val(); for(var i=0;i<rows;i++){ $(“table”).append(“<tr></tr>”); } for(var i=0;i<cols;i++){ $(“tr”).append(“<td></td>”); } $(“td”).<a href="https://www.rokub.com/category/css" title="css">css</a>({width:”150px”,height:”40px”,border:” 1px solid black”,textAlign:”center”}) $(“tr”).append(“<input type=’button’ class=’c2 c3′ name=’delete1′ value=’删除’/>”); $(“tr”).append(“<input type=’button’ class=’c2 c3′ name=’addtop’ value=’添加上一行’/>”); $(“tr”).append(“<input type=’button’ class=’c2 c3′ name=’addbottom’ value=’添加下一行’/>”); $(“.c3″).<a href="https://www.rokub.com/category/css" title="css">css</a>({width:”150px”,height:”42px”,background:”#e35435″,border:”1px solid black”}) $(“input[name=’addtop’]”).click(function(){ var newtr=$(this).parent().clone(true); newtr.children(“td”).html(“”).<a href="https://www.rokub.com/category/css" title="css">css</a>(“background”,”red”); $(this).parent().before(newtr); // newtr.css(“background”,”red”);//这里把.css拿到上面去不然整行BG都变色了不雅观 }) $(“input[name=’addbottom’]”).click(function(){ var newtr=$(this).parent().clone(true); newtr.children(“td”).html(“”).css(“background”,”gold”); $(this).parent().after(newtr); // newtr.css(“background”,”gold”);// }) $(“input[name=’delete1′]”).click(function(){ $(this).parent().detach(); }) $(“td”).click(function(e){ var that=this; var content=$(that).text(); $(that).html(“<input type=’text’ class=’in1′ />”); $(“input[class=’in1′]”).css({width:”150px”,height:”38px”,border:”0″,textAlign:”center”}) $(“input[class=’in1′]”).focus(); $(“input[class=’in1′]”).val(content); $(“input[class=’in1′]”).click(function(e){ e.stopPropagation(); }) $(“input[class=’in1′]”).blur(function(){ $(that).html($(this).val()); }) }) }) </script> </body> </html>

» 本文来自：前端开发者 » 《JQ-表格实时编辑–修正版》

» 本文链接地址：https://www.rokub.com/8856.html

» 您也可以订阅本站：https://www.rokub.com

JQ-表格实时编辑–修正版

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

JQ-表格实时编辑–修正版

You may also like...

HTML5+CSS3+JS制作抽奖转盘

零基础学jQuery插件开发|网站前端开发_前端开发者

前端开发选项卡设计：自动切换

发表评论 取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复