昨天写了篇博客,有博友指出手动拼接html的写法不是很好,建议使用jsrender生成html,早上看了下jsrender,觉得和Handlebars很像,所以今天下午试着使用Handlebars生成html,不再手动拼接了。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery Handlebars动态新增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{ width: 100px; } #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 type="text/javascript" src="../../js/handlebars-v1.3.0.js"></script> <script id="tr-template" type="text/x-handlebars-template"> {{#ifEqual varNum 1}} <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}} <tr> <td style="vertical-align: middle" rowspan="{{varNum}}"><a href="javascript:;" onclick="delRow(this,{{varNum}})">删除</a></td> <td style="vertical-align: middle" rowspan="{{varNum}}"><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="{{varNum}}"><select class="fixWidth"><option value="">所有</option></select></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> {{/ifEqual}} {{addTr varNum}} </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(); } } } /* select onchange事件 */ 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); } /* 使用handlerbar模版生成html */ function generateHtml(varNumTmp) { var template = Handlebars.compile($("#tr-template") .html()); var varObj={varNum:""+varNumTmp+""}; $("#infoDetail").append(template(varObj)); } $(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() { $('#resultDiv').html(''); var varNum = $(this).val(); if (varNum == this.defaultValue) { $(this).val(""); } }) /* 失去焦点 */ $("#v_num").blur(function() { $('#resultDiv').html(''); 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); }); Handlebars.registerHelper('ifEqual', function(v1, v2, options) { if(v1 === v2) { return options.fn(this); } return options.inverse(this); }); Handlebars.registerHelper('addTr', function(var1, fn) { var result = ''; var len=parseInt(var1); for(var i=1;i<len;i++) { result+='<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>'; } return new Handlebars.SafeString(result);; }); }); </script> </head> <body> <form id="contentForm" method="post" action=""> <div id="infoDiv"> <table border="0" width="100%" cellpadding="0" cellspacing="1"> <tr> <td><label for="v_id">流水编号:</label></td> <td><input id="v_id" name="v_id" type="text" maxlength="50"></td> <td><label for="v_cname">单位名称:</label></td> <td><input id="v_cname" name="v_cname" type="text" maxlength="50"></td> <td><label for="v_pname">用户姓名:</label></td> <td><input id="v_pname" name="v_pname" type="text" maxlength="50"></td> </tr> <tr> <td><label for="v_num">明细数量:</label></td> <td><input id="v_num" name="v_num" type="text" value="请输入正整数"></td> <td><label 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 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,结果为:
说明:
Handlebars如果使用{{#if num==1}}这种写法,会报错.
Uncaught Error: Parse error on line 2: {{#if varNum ==1}} <tr> -------------------^ Expecting 'STRING', 'INTEGER', 'BOOLEAN', 'OPEN_SEXPR', 'ID', 'DATA', got 'EQUALS'
解决方法:自定义Equal方法,参考http://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional。
扩展的方法如果返回值想保持原值,请使用 return new Handlebars.SafeString(result);
针对博友说的给tr指定id,使用id删除更好,本人暂时没有完成,主要是如果明细列大于1,在模版里面判断有些麻烦。
感谢提出意见的各位博友,谢谢。
本文系原创,转载请注明出处,谢谢。
全文完。
相关推荐
Web开发利器,Javascript模版引擎Handlebars.js源文件与示例
这个简单的代码示例使用jQuery Ajax和Handlebars JS以及一种方便且易于遵循的自定义提取方法,该方法将将外部html文件中的html内容加载到主html文件中所需的目标元素中。 利用Handlebars JS,您可以选择传递数据以...
Handlebars.java 是一个不包含逻辑的,语义的 Java 模板引擎。 Maven: <groupId>com.github.jknack</groupId> <artifactId>handlebars ${handlebars-version} 示例代码: Handlebars handlebars = ...
#handlebars-tr 一个简单的助手来翻译车把中的字符串。 ##用法 var Handlebars = require('handlebars'); //var handlebarsTr = require('handlebars-tr')(Handlebars, '__language', '***'); var handlebarsTr...
吞咽把手预编译任务跑步: npm install gulp -g - 全局安装 Gulp。 npm install - npm install其他依赖项。 gulp - 运行gulp任务。信息gulpfile.js规定文件的读取位置和保存位置。 根据您自己的需要更新它。...
Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件。 1 <script type="text/javascript" src="script/jquery.js"> 2 <script type="text/javascript" src="script/...
handlebars官方例子及源代码
handlebars入门教程
handlebars.js
handlebars-v3.0.0.js
Laravel开发-handlebars-l4 Laravel4的handlebars.php包装
handlebars模板引擎所需要的js文件 博客文章所需要的js <script src="../js/jquery-1.8.3.min.js"> <script src="../js/handlebars-v3.0.0.js"></script>
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证...
handlebars.js v4.0.5 文件下载。 handlebars.js handlebars
handlebars-v2.0.0.js
Handlebars.js 是一个 JavaScript 的页面模板库 标签:Handlebars
Handlebars.js是一个非常流行的功能强大的模板引擎,简单易用,具备较好的学习社区。利用Handlebars您可以方便的把html从javascript代码中分离出来,从而书写更清晰的代码
前端项目-requirejs-handlebars,RequireJS Handlebars template plugin
前端开源库-skava-handlebars-compilerskava handlebars compiler,grunt task to precompile handlebars.js模板,选项与cli实用程序相同
颠覆传统评论网站模型的Node / Express / Sequelize / Handlebars应用程序。 我们允许企业创建和审查他们的客户。 他们的评分越高,获得客户奖励的机会就越多。 全面发展之后,Turn the Tables将通过提供奖励,教育...