分享一个表格插入和删除编辑功能用jQuery实现
2024-08-30 01:42:40
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <input type="text" placeholder="行数rows" name="rows"> <input type="text" placeholder="列数cols" name="cols"> <button>生成</button> <div id="box" style="overflow: hidden"></div> <script> $("button:first").click(function(){ $("#box").html(""); //important var row = $("input[name='rows']").val(); var col = $("input[name='cols']").val(); $("#box").append("<table></table>"); for(var i = 0;i < row;i++){ $("table").append("<tr></tr>"); } for(var j = 0;j < col;j++){ $("tr").append("<td></td>"); } $("td").css({"width":"100px","height":"30px","border":"1px solid #53a9ff"}); $("tr").append("<button class='del' name='new'>删除</button>"); $("tr").append("<button class='add' name='new'>增加下一行</button>"); $("tr").append("<button class='add2' name='new'>增加上一行</button>"); $("button[name='new']").css({"height":"34px","border":"1px solid #53a9ff","backgroundColor":"white"}); $("button[class='del']").click(function(){ $(this).parent().detach(); }); $("button[class='add']").click(function(){ var newtr = $(this).parent().clone("true"); $(newtr).css("background","orange"); //???只想给tr下的td背景色,但是此时tr被赋值给变量newtr $(this).parent().after(newtr); }); $("button[class='add2']").click(function(){ var newtr = $(this).parent().clone("true"); $(newtr).css("background","#00da96"); $(this).parent().before(newtr); }); $("td").click(function(){ var that = this; var content = $(this).text(); $(this).html(""); $(this).append("<input type='text' class='create'>"); $("input[class='create']").focus().val(content); $("input[class='create']").css({"width":"98px","height":"26px","border":"1px solid #53a9ff"}); $($("input[class='create']")).click(function(ev){ ev.stopPropagation(); }); $($("input[class='create']")).blur(function(){ $(that).html($("input[class='create']").val()); }); }); }); </script> </body> </html>
最新文章
- C++中下标操作注意事项
- C语言实现二叉树-02版
- 整合ssh model $$_javassist_13 cannot be cast to javassist.util.proxy.Proxy
- Apache2.4和Apache2.2访问控制配置语法对比
- javascript继承(七)—用继承的方式实现照片墙功能
- vs2010更改默认环境设置
- C#后台代码编写图片地址Properties.Resources._1;
- jquery.validate 以alert方式显示错误方法
- JMeter插件之 BlazeMeter&#39;s XMPP----测试Openfire等
- Python ymal 模块和configparser
- php的运行机制
- Python----爬虫入门系列等
- ::WritePrivateProfileString()的用法,以及GetPrivateProfileString的用法注意事项
- prim及其练习
- MySql按字段分组取最大值记录
- 关于oraclize使用最好的一篇文章
- Windows下Anaconda安装 python + tensorflow GPU版
- iOS之已经审核通过的app在App Store上搜不到的解决办法
- mongoTemplate操作内嵌文档
- HTTP Status Codes 状态码
热门文章
- [ xml ] [ log4j2 ] No grammar constraints (DTD or XML Schema) referenced in the document.
- 《剑指offer》二叉树的镜像
- UI Framework-1: Aura Layout Managers
- Android chromium 2
- 学习Go语言之简易ORM框架
- POJ-2142 The Balance 扩展欧几里德(+绝对值和最小化)
- CMSIS-RTOS 信号量
- 【Henu ACM Round#19 A】 Vasya the Hipster
- glEnable(GL_DEPTH_TEST)作用
- POJ 1088: 滑雪(经典 DP+记忆化搜索)