JsRender動的生成Tr
18234 ワード
JsRendererの詳細:http://www.jsviews.com/#html 次の例ではJsRenderを使用してTrを動的に生成します.コードが読めない場合は、公式サイトで紹介してください.コードは以下の通りです.
JsRenderとHandlerbarsは非常に類似しており、実行結果は次のとおりです.
1を入力します.結果は次のとおりです.
2を入力します.結果は次のとおりです.
送信、結果:
本文はオリジナルです.転載は出典を明記してください.ありがとうございます.
全文が終わる.
<!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(/</g,"<");
html=html.replace(/>/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を入力します.結果は次のとおりです.
送信、結果:
本文はオリジナルです.転載は出典を明記してください.ありがとうございます.
全文が終わる.