指定位置增加一行示例代码
代码 示例 指定 位置 增加 一行
2023-09-11 14:19:27 时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Godot Engine"> <meta name="description" content=""> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/table.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <table width="100%" class="table table-bordered text-center table-list"> <tbody> <tr> <td align="left" colspan="3">四、经济效益</td> </tr> <tr> <td colspan="3">自行实施情况</td> </tr> <tr> <td class="bac" width="100px"> <div class="out"> <p class="p1">时间</p> <p class="p2">项目</p> </div> </td> <td>实施日至20日底</td> <td>20年初至20年底</td> </tr> <tr> <td>产量</td> <td><input class="form-control"></td> <td><input class="form-control"></td> </tr> <tr> <td>新增销售额(万元)</td> <td><input class="form-control"></td> <td><input class="form-control"></td> </tr> <tr> <td>新增利润(万元)</td> <td><input class="form-control"></td> <td><input class="form-control"></td> </tr> <tr> <td>新增出口额(万元)</td> <td><input class="form-control"></td> <td><input class="form-control"></td> </tr> <tr> <td colspan="3" align="left"> <p>经济效益说明(或列表):(1000字以内)</p> <textarea class="form-control"></textarea> </td> </tr> </tbody> </table> <table width="100%" id="aTable" class="table table-bordered text-center"> <tbody> <tr> <td align="left" colspan="3">四、经济效益</td> </tr> <tr> <td colspan="2">专利出资情况(可加行)</td> <td align="center">操作</td> </tr> <tr> <td align="center">单位名称</td> <td align="center">出资万元</td> <td><a href="javascript:void(0);" onclick="addTr()">新增</a></td> </tr> <tr> <td><input class="form-control"></td> <td><input class="form-control"></td> <td><a href="javascript:void(0);" onclick="deleteTr(this)">删除</a></td> </tr> <tr> <td><input class="form-control"></td> <td><input class="form-control"></td> <td><a href="javascript:void(0);" onclick="deleteTr(this)">删除</a></td> </tr> <tr> <td>合计(万元)</td> <td><input class="form-control"></td> <td><a href="">计算</a></td> </tr> </tbody> </table> </body> <script type="text/javascript"> function addTr(){ //var table = $("#aTable"); var tr= $("<tr>" + "<td><input class='form-control'></td>" + "<td><input class='form-control'></td>" + "<td><a href='javascript:void(0);' onclick='deleteTr(this)'>删除</a></td>"); //table.append(tr); var lastIndex = $('#aTable:first tbody tr').length-2; var lastRow=$('#aTable:first tbody tr:eq('+lastIndex+')'); lastRow.after(tr); } function deleteTr(aObject){ //$(e.target).parents("tr").remove(); var tr=$(aObject).parents("tr"); tr.remove(); } </script> </html>
bootstrap使用V3以上版本
table.css如下:
.out{ position:relative; } .p1{ position:absolute; top:-5px; left:28px; width:80px; } .p2{ position:absolute; top:15px; left:-22px; width:80px; } table.table-list td.bac{ background: url(../img/table_bac.png) no-repeat center; height: 47px; }
下载示例:https://files.cnblogs.com/files/flying607/%E8%A1%A8%E6%A0%BC9.8.zip
相关文章
- 阿里早期Android加固代码的实现分析
- C#高级编程(第9版) -C#5.0&.Net4.5.1 书上的示例代码下载链接
- Jenkins与网站代码上线解决方案
- OpenCV的视频背景/前景分割(背景建模/前景提取)类cv::bgsegm::BackgroundSubtractorGSOC的使用示例代码及运行效果
- Python3.9的69个内置函数(内建函数)介绍,并附简单明了的示例代码
- uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程
- JAVA单元测试框架-12-java代码重复执行失败的测试用例
- NLP文本分类入门学习及TextCnn实践笔记——代码实现(二)
- SAP RETAIL 使用事务代码MM41创建商品主数据时不能激活检验类型?
- 《Java遗传算法编程》—— 2.3 关于本书的代码示例
- ios获取本地音乐库音乐很详细 扫描IPHONE本地音乐文件,获得音乐名,歌手名代码示例
- VSCode配置verilog环境(代码提示+自动例化+格式化)
- Win10无法更新出错代码为0x80080005的解决方法
- 微信小程序带cookie的request请求代码封装(小程序使用session)
- 微信公众号开发之创建菜单栏代码示例(php)
- 【Unity3D插件】DoTween插件的简单介绍及示例代码
- STC89C52单片机DS1302介绍以及代码示例
- 代码质量管控的四个阶段
- 华为OD机试 - 求最大数字(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- Qt5该插件机制(7)--插件开发演示示例代码(Lower-level API)
- Linux下 vim代码编译器的使用
- js 使FORM表单的所有元素不可编辑的示例代码 表
- Java三大器之拦截器(Intercepter)的实现原理和代码示例