jQuery在table中追加tr和删除tr
2024-05-15 01:40:23
jQuery在table中追加tr和删除tr
1. 追加tr
jQuery添加新内容有以下四个方法:
(1) append() - 在被选元素的结尾插入内容（效果如下图：）
(2) prepend() - 在被选元素的开头插入内容（效果如下图：）
(3) after() - 在被选元素之后插入内容（效果如下图：）
(4) before() - 在被选元素之前插入内容（效果如下图：）
2. 删除tr
remove() - 删除被选中元素的内容（效果如下图：）
3. 动态拼接tr实例
$.ajax({type: 'POST',url: '/flightChangeRecord/queryOrderByOrderNo.in',data: {intlOrderNo: intlOrderNo},async: true,dataType: 'JSON',success: function (data) {var flightType = $('input[name=flightType]:checked').val();$('.flightChange').hide();$('.flightCancelled').hide();$('.flightData').remove();$('.oldFlightNoFlag').val("1");var trs = '';for (var i = 0; i < data.length; i++) {if(flightType == 1){trs += '<tr class="flightData"><td><input type="hidden" name="recordSegmentVoList['+i+'].intlOrderSegmentId" value="'+data[i].id+'"/>原：</td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldFlightNo" value="'+ data[i].flightNo +'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepCode" value="'+data[i].depCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrCode" value="'+data[i].arrCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepTerm" value="'+data[i].depTerm+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrTerm" value="'+data[i].arrTerm+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldDepDate" value="'+ moment(data[i].depDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldArrDate" value="'+moment(data[i].arrDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 30px;" name="recordSegmentVoList['+i+'].oldSeatClass" value="'+ data[i].seatClass +'"/></td></tr>';trs += '<tr class="flightData changeFlightData'+i+'"><td><input type="hidden" name="xxx" value="'+i+'"/>新：</td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeFlightNo" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepTerm" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrTerm" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepDate" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrDate" value=""/></td><td><input type="text" style="width: 30px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeSeatClass" value=""/></td>';trs += '<td style="border:1px solid white;"><img class="img-btn img-add-btn" src="/images/add-fill.png"/></td></tr>';}else if (flightType == 2) {trs += '<tr class="flightData"><td><input type="checkbox" class="flightChangeCheck" name="recordSegmentVoList['+i+'].intlOrderSegmentId" value="'+data[i].id+'"/>取消：</td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldFlightNo" value="'+ data[i].flightNo +'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepCode" value="'+data[i].depCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrCode" value="'+data[i].arrCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepTerm" value="'+data[i].depTerm+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrTerm" value="'+data[i].arrTerm+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldDepDate" value="'+ moment(data[i].depDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldArrDate" value="'+moment(data[i].arrDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 30px;" name="recordSegmentVoList['+i+'].oldSeatClass" value="'+ data[i].seatClass +'"/></td></tr>';}}$('.fgroup table').append(trs);$('.img-add-btn').click(function () {var indexFlag = $(this).parents('tr').children().eq(0).children().val();debugger;var len = $('.changeFlightData'+indexFlag).length;;if(len === 3){layer.alert('最多只能添加三段航变！');return;}//len = 3 -len;var str = '</br><tr class="flightData changeFlightData'+indexFlag+'"><td><input type="hidden" name="xxx" value="'+indexFlag+'"/>新：</td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeFlightNo" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepTerm" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrTerm" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepDate" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrDate" value=""/></td><td><input type="text" style="width: 30px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeSeatClass" value=""/></td>';str += '<td style="border:1px solid white;"><img class="img-btn img-del-btn" src="/images/del-fill.png"/></td></tr>';$(this).parents('tr').after(str);});$('.fgroup table').on('click', '.img-del-btn', function() {$(this).parents('tr').remove();});}});jQuery在table中追加tr和删除tr相关推荐
- jQuery为table表格动态添加或删除tr
HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细&qu ...
- html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号 捆包号 品名 规格 材质 重量 业务需求是,从后台获取到订单 ...
- html tabl自动生成序列号,jQuery实现table中的tr上下移动并保持序号不变的实例代码...
jQueryMoveTr.html 代码如下: jQuery-bhang aaaaaaaaaa @@@@@@@ 注释1 bbbbbbbbbbbbb ######### 注释2 cccccccccccc ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){$("#tableId tr").find("td").each(funct ...
- jQuery 在Table中选择input之类的东西注意事项
jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"><tr&g ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据...
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
- jQuery 向div中追加内容
$(function(){$("#divId").append("<div>这个是追加的div</div>");//或者 $(" ...
- layui table动态追加(删除)一行,并进行原始数据渲染
记录:layui table.render动态追加(删除)一行数据,并对原有数据进行渲染 场景:修改商品入库任务时: 首先进行对已选择客户的入库商品进行遍历渲染 可追加入库商品,点击新增商品按钮时,弹 ...
- jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁 ...
最新文章
- SOLOv 2：实例分割（动态、更快、更强）
- Android Gatekeeper流程深度解剖
- highcharts学习1----Line charts
- snakeyaml读取yaml/yml配置文件数据
- 在linux下使用udev获取热插拔（hotplug）事件
- python if else 与 if elif else 的区别
- ElasticSearch - 聚合 aggs
- Mac电脑：Android Studio 连接 MUMU 网易模拟器
- 14个新鲜的免费图标集
- pandas多列聚合
- 计算机组成原理概述篇
- OpenCV(C++)图像处理基础03：读写像素、像素值修改、像素反差
- js调用打印机打印网页字体总是缩小一号的解决方法
- UG NX 10 控制基准平面的显示大小
- 服务器如何查看 网站访问记录,如何查看服务器远程的访问记录
- Selenium自动化测试框架—简单了解
- Monit的web监控界面
- NP-complete
- 流星蝴蝶剑无限气改法
- 字体和常用web字体