`
53873039oycg
  • 浏览: 841858 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JsRender动态生成Tr

 
阅读更多

       JsRender详细介绍:http://www.jsviews.com/#html
       下面的例子使用JsRender动态生成Tr,看不懂代码的，请去官网看介绍，代码如下：

        

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery JsRender动态新增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;
}
.hide{
   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/jsrender/jsrender.js"></script>
<script>
     $.views.converters(
		"addTr",
		function(var1) {
			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 result;
		});
	/* 删除当前行 */
	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 varObj = {
			varNum : "" + varNumTmp + ""
		};
		var html =$("#temp_hidden").render(varObj);
		/* 如果使用textarea,则需要把html内容中的<>替换回来
		html=html.replace(/&lt;/g,"<");
		html=html.replace(/&gt;/g,">"); */
		$("#infoDetail").append(html);
	}
	$(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);
				});
	});
</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>
	<!-- 使用textarea也可以 -->
	<!--<textarea id="temp_hidden" class="hide">-->
	 <!-- {{if 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> 
               {{addTr:varNum}}
           {{/if}} -->
	<!--</textarea>-->
	<script id="temp_hidden" type="text/x-jsrender"> 
	       {{if 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> 
               {{addTr:varNum}}
           {{/if}}
	</script> 
</body>
</html>

     可以看出，JsRender和Handlerbars非常类似，运行结果为：

    

      输入1，结果为：

     

       输入2，结果为：

      

           提交，结果为：

          

      本文系原创，转载请注明出处，谢谢。

      全文完。 

  

  • 大小: 29.5 KB
  • 大小: 29.7 KB
  • 大小: 39.4 KB
  • 大小: 78.8 KB
0
顶
0
踩
分享到：
| jQuery结合Handlebars生成简单的Input,Sele ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js添加删除行功能实现

    创建一个状态变量存储表格数据，然后在组件的`render`方法中根据这个状态生成表格行： ```jsx import React, { useState } from 'react'; function TableRowApp() { const [rows, setRows] = useState(['数据1', ...

    jquery html5 canvas 图表插件获取表格数据值生成走势图

    至于图表插件，可能有多种选择，如Chart.js、Fabric.js或者更定制化的解决方案。这些插件通常提供丰富的配置选项，如颜色、图例、网格线、动画效果等，可以方便地集成到项目中。在使用插件时，我们需要按照其文档...

    Python使用pyh生成HTML文档的方法示例

    Python中的`pyh`库是一个简洁...总的来说，`pyh`库提供了一种简洁的方式来生成HTML文档，尤其适合那些需要快速构建静态页面或动态生成HTML内容的项目。通过学习和实践，我们可以利用它轻松地构建出符合需求的HTML结构。

    动态更新highcharts数据的实现方法

    在动态更新Highcharts数据时，我们通常需要在图表生成后根据新的数据源来更新已有系列的数据，或者添加新的系列。以下是一种实现动态更新Highcharts数据的方法： 首先，我们需要在HTML中引入Highcharts所需的jQuery...

    FusionCharts 二次开发指南

    FusionCharts的主要特点在于其强大的交互性和动态性，通过利用Flash的动画效果以及使用XML作为数据接口，能够生成与用户高度互动的动态图表。 #### 二、数据接口——XML FusionCharts采用XML作为其数据接口，这种...

    Vue.js实现可排序的表格组件功能示例

    在表格组件中，我们不仅需要动态生成表头（`&lt;th&gt;`）和数据行（`&lt;tr&gt;`），还需要根据用户排序操作实时更新它们。这通过Vue.js的`render`函数实现，它允许我们在运行时生成和操作DOM。 3. **数据排序**： 当用户点击...

    LayUi组件TableSelect

    此外，TableSelect还支持动态加载数据，你可以通过监听表格的`done`事件，根据实际情况动态生成下拉选项。例如，当用户点击某行时，根据该行的数据去后台获取相关的下拉选项数据，然后利用`form.render('select')`...

    table切换例子

    2. **动态渲染**：在用户触发切换时，根据新的数据源动态生成表格。这种方式更灵活，可以适应数据量大或者数据变化频繁的情况。 3. **分页**：如果数据量较大，可以使用分页功能，每次只显示一部分数据，用户可以...

    Python+Flask(1)-AmazeUI后台管理开发框架

    ('static', filename='amazeui/js/amazeui.min.js')}}"&gt; &lt;!-- 你的AmazeUI页面内容 --&gt; ``` 在这里，`url_for`函数用于生成静态文件的URL，确保浏览器能够正确加载AmazeUI的资源。 为了实现后台管理功能，...

    vue实现年日历视图及休息日工作日设置功能

    render: h =&gt; h(App) }); ``` 接下来，我们需要创建一个日历组件。这个组件将渲染一年的日历视图，并处理用户的交互。在`components`目录下创建一个名为`YearCalendar.vue`的文件，编写组件模板： ```html ...

    DataTableRowUpAndDown

    在"上移"和"下移"的场景中，用户可以方便地调整表格中行的顺序，这对于那些需要根据需求动态调整数据顺序的项目特别有用。比如，当用户需要更改某个条目的优先级或者按照特定逻辑排列数据时，这个功能就显得尤为重要...

    node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    总结来说，通过结合Node.js、Express、MySQL、EJS和Bootstrap，我们可以创建一个基础的用户登录注册系统，其中包括处理HTTP请求、管理用户会话、与数据库交互以及生成动态页面等功能。虽然这个简单的示例可能不足以...

    详解angular中如何监控dom渲染完毕

    AngularJS通过指令（directives）来扩展HTML的功能，如`ng-repeat`，它在页面加载后用于遍历数据并动态生成DOM元素。 例如，在提供的代码片段中，`&lt;tr ng-repeat="user in users"&gt;`会根据`users`数组中的每一项创建...

    Web-Application-Part2:使用Flask Templates设置Bootstrap HTML模板，并使用它来显示从数据库中检索到的数据

    Flask提供了一个方便的`render_template`函数，可以将数据和模板结合，生成最终的HTML页面。例如，我们可以创建一个路由（route）处理GET请求，查询数据库并返回一个包含查询结果的视图（view）。 ```python from ...

    Flask:使用Flask用HTML渲染csv文件

    这对于数据可视化、报告生成或简单数据分析的应用非常有用。 首先，我们需要确保已经安装了Flask。如果还没有安装，可以通过以下命令进行安装： ```bash pip install flask ``` 创建一个名为`app.py`的文件，这是...

    react-app4909673313157976

    - **表格**：`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`元素用于创建表格。 - **样式化**：`&lt;style&gt;`元素或外部CSS文件（`.css`）用于添加样式，CSS选择器如类（`.myClass`）和ID（`#myID`）用于定位元素。 在React中，...

    crazy-panda-react-table-deploy

    运行`npm run build`将生成一个`build`目录，里面包含所有用于部署的文件。你可以将这些文件上传到任何支持静态文件托管的服务器，如GitHub Pages、Netlify或AWS S3。 为了提高性能和用户体验，我们还可以考虑使用...

    Tapestry字典0.1.pdf

    - **示例**: `tr:hover { background-color: #f0f0f0; }` **5.3 使用tapestry-Contrib.library** - **实现**: 使用社区贡献的库来扩展功能。 - **示例**: 添加依赖项`tapestry-contrib`. **5.4 自定义table显示的...

Magicbox
Global site tag (gtag.js) - Google Analytics