下面的例子使用jQuery动态在table中新增tr,删除tr,具体请看代码。代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery 动态新增tr</title> <style> * { margin: 0px; padding: 0px; margin: 0 auto; font-size: 15px; } #infoDiv { margin-top: 10px; width: 900px; border-top: 1px solid #79B2F1; border-bottom: none; } #infoDiv table { margin-top: 10px; } #infoDiv table td { padding: 4px 6px; text-align: left; } #submitDiv span { color: #fff; background: #89D900; height: 25px; width: 100px; display: block; line-height: 25px; font-weight: bold; text-align: center; margin: 0 auto; } #submitDiv a { text-decoration: none; } #disDiv { margin-top: 10px; width: 900px; } #disDiv table { margin-top: 10px; border-collapse: collapse; margin-bottom: 10px; } #disDiv table thead { height: 30px; line-height: 30px; background: #F4F4F4; } #infoDetail td { text-align: center; padding: 4px 6px; border-bottom: 1px solid #e6e6e6; } #infoDetail td a { text-decoration: none; } .fixWidth { width: 110px; } #resultDiv { margin-top: 10px; width: 900px; border: 1px solid #E6E6E6; padding: 10px; display: none; } </style> <script type="text/javascript" src="../../js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../../js/wdatepicker/WdatePicker.js"></script> <script> function delRow(obj, num) { if (num == 1) { $(obj).parent().parent().remove(); } else if (num > 1) { var o = $(obj).parent().parent(); var ary = new Array(); for (var i = 0; i < num; i++) { ary[i] = o; o = o.next("tr"); } for (var i = 0; i < num; i++) { ary[i].remove(); } } } function onSelectChange(obj) { var varSelect = $.trim($(obj).val()); if (varSelect == '') { return false; } var subSelect = $(obj).parent().next().children("select"); var varHtml = ''; if (varSelect == 1) { varHtml += '<option value="11">北京2</option><option value="12">北京3</option><option value="13">北京4</option>'; } else if (varSelect == 2) { varHtml += '<option value="21">天津2</option><option value="22">天津3</option><option value="23">天津4</option>'; } else if (varSelect == 3) { varHtml += '<option value="31">河北2</option><option value="32">河北3</option><option value="33">河北4</option>'; } subSelect.html(varHtml); } function generateHtml(varNum) { var varHtml = ''; if (varNum == 1) { varHtml = '<tr><td><a href="javascript:;" onclick="delRow(this,1)">删除</a></td><td><select onchange="onSelectChange(this);" class="fixWidth"><option value="">所有</option><option value="1">北京</option><option value="2">天津</option><option value="3">河北</option></select></td><td><select class="fixWidth"><option value="">所有</option></select></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>'; } else { varHtml = '<tr><td style="vertical-align: middle" rowspan="'; varHtml+=varNum; varHtml+='"><a href="javascript:;" onclick="delRow(this,'; varHtml += varNum; varHtml += ')">删除</a></td><td style="vertical-align: middle" rowspan="'; varHtml+=varNum; varHtml+='"><select onchange="onSelectChange(this);" class="fixWidth"><option value="">所有</option><option value="1">北京</option><option value="2">天津</option><option value="3">河北</option></select></td><td style="vertical-align: middle" rowspan="'; varHtml+=varNum; varHtml+='"><select class="fixWidth"><option value="">所有</option></select></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>"'; for (var i = 1; i < varNum; i++) { varHtml += '<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>'; } } $("#infoDetail").append(varHtml); } $(function() { var varDate = new Date(); var varYear = varDate.getFullYear(); var varMon = varDate.getMonth() + 1; var varDay = varDate.getDate(); if (varMon < 10) { varMon = "0" + varMon; } $('#v_doneDate').val(varYear + "-" + varMon + "-" + varDay); $('#submitForm').on('click', function() { $('#resultDiv').css("display","none"); var varNumTmp = $.trim($('#v_num').val()); varNum = parseInt(varNumTmp); if (isNaN(varNum) || varNum < 1) { return false; } generateHtml(varNum); }); $("#v_num").focus(function() { var varNum = $(this).val(); if (varNum == this.defaultValue) { $(this).val(""); } }) $("#v_num").blur(function() { var varNum = $(this).val(); if (varNum == "") { $(this).val(this.defaultValue); } else { varNum = parseInt(varNum); if (isNaN(varNum) || varNum < 1) { return false; } generateHtml(varNum); } }) $('#submitBtn').on( 'click', function() { var varInfo = "[{'v_id':'" + $.trim($("#v_id").val()) + "','v_cname':'" + $.trim($("#v_cname").val()) + "','v_pname':'" + $.trim($("#v_pname").val()) + "','v_startDate':'" + $.trim($("#v_startDate").val()) + "','v_doneDate':'" + $.trim($("#v_doneDate").val()) + "'}],"; varInfo += "["; var infoDtl = $("#infoDetail"); var trAll = infoDtl.children("tr"); var trLen = trAll.length; var varRegion = ''; var varCountry = ''; var varSaleName = ''; var varPrice = ''; var varSalePrice = ''; for (var i = 0; i < trLen; i++) { var tdAll = $(trAll[i]).children("td"); var tdLen = tdAll.length; if (tdLen > 3) { varRegion = $.trim($(tdAll[1]).children("select") .val()); varCountry = $.trim($(tdAll[2]).children("select") .val()); varSaleName = $.trim($(tdAll[3]).children("input") .val()); varPrice = $.trim($(tdAll[4]).children("input") .val()); varSalePrice = $.trim($(tdAll[5]).children("input") .val()); } else if (tdLen > 0 && tdLen <= 3) { varSaleName = $.trim($(tdAll[0]).children("input") .val()); varPrice = $.trim($(tdAll[1]).children("input") .val()); varSalePrice = $.trim($(tdAll[2]).children("input") .val()); } varInfo += "{'varRegion':'" + varRegion + "','varCountry':'" + varCountry + "','varSaleName':'" + varSaleName + "','varPrice':'" + varPrice + "','varSalePrice':'" + varSalePrice + "'},"; } varInfo = varInfo.substring(0, varInfo.length - 1); varInfo += "]"; $('#resultDiv').css("display","block"); $('#resultDiv').html(varInfo); }); }); </script> </head> <body> <form id="contentForm" method="post" action=""> <div id="infoDiv"> <table border="0" width="100%" cellpadding="0" cellspacing="1"> <tr> <td><label class="label_des" for="v_id">流水编号:</label></td> <td><input id="v_id" name="v_id" type="text" maxlength="50"></td> <td><label class="label_des" for="v_cname">单位名称:</label></td> <td><input id="v_cname" name="v_cname" type="text" maxlength="50"></td> <td><label class="label_des" for="v_pname">用户姓名:</label></td> <td><input id="v_pname" name="v_pname" type="text" maxlength="50"></td> </tr> <tr> <td><label class="label_des" for="v_num">明细数量:</label></td> <td><input id="v_num" name="v_num" type="text" value="请输入正整数"></td> <td><label class="label_des" for="v_startDate">生效时间:</label></td> <td><input id="v_startDate" name="v_startDate" type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-%d',maxDate:'#F{\'2099-12-31\'}'})"></td> <td><label class="label_des" for="v_doneDate">制作日期:</label></td> <td><input id="v_doneDate" name="v_doneDate" type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-%d',maxDate:'#F{\'2099-12-31\'}'})"></td> </tr> <tr> <td colspan="4"></td> <td><div id="submitDiv"> <a id="submitForm" href="javascript:void(0);"> <span>新增明细列</span></a> </div></td> </tr> </table> </div> <div id="disDiv"> <table border="0" width="100%" cellpadding="0" cellspacing="1"> <colgroup> <col width="10%"> <col width="20%"> <col width="20%"> <col width="20%"> <col width="15%"> <col width="15%"> </colgroup> <thead> <tr> <th>操作</th> <th>地市</th> <th>县市</th> <th>营销名称</th> <th>原价</th> <th>优惠价</th> </tr> </thead> <tbody id="infoDetail"> </tbody> </table> </div> <div id="submitDiv"> <a id="submitBtn" href="javascript:void(0);"> <span>提交</span></a> </div> </form> <div id="resultDiv"></div> </body> </html>
运行结果为:
在明细数量输入框输入正整数就可看到效果,明细数量是指一行有多少明细,输入1结果为:
输入2结果为:
提交后结果为:
本文系原创,转载请注明出处,谢谢。
全文完。
相关推荐
主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下
主要介绍了jquery动态添加删除(tr/td)的方法,需要的朋友可以参考下
jQuery分页插件jPagination示例(静态DEMO)
jQuery+EasyUI开发示例(附源码)
jquery源代码 包括示例 包括示例jquery源代码 包括示例 包括示例
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
今天要分享一款基于jQuery的标签插件,使用这款插件,我们可以动态增加和删除标签,在写博文的时候,我们为博文打标签就不用逗号或者分号隔开了,当你每新增一个标签时,该插件就会为你检查标签内容输入的正确性,...
jQuery动态添加删除编辑标签代码是一款自定义选项卡,添加选项卡,删除选项卡,编辑选项卡内容等。 jQuery动态添加删除编辑标签代码截图
里面有利用jquery实现放大镜效果,图片的轮换效果,遮罩效果的示例源码,下载下来就可以看到实现后的效果,查看源码就可以学习!
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
jQuery-Easyui完整示例demo,
jquery产品展示示例jquery产品展示示例jquery产品展示示例jquery产品展示示例jquery产品展示示例
几个Jquery表单验证特效示例感觉挺不错的,如有需要的可以下载。
jquery ajax 异步 上传 示例
jQuery、jQuery UI及jQuery Mobile技巧与示例
jQuery星级评分代码示例,很好的素材
jquery动态添加option js动态添加option 代码如下:var sel= document.getElementById(“Selected1”); sel.options.add(new Option(“请选择”,””));sel.options.add(new Option(“name”,”id”)); jquery...
jquery实现递归tr子节点