標籤：des style blog tar ext width
paip.提升效率--資料繫結到table原理和流程Angular js jquery實現html
#--keyword 1
#---原理和流程 1
#----jq實現的代碼 1
#-----Angular 的實現 3
#--keyword
jquery 遍曆表格tr td
Angular 模板綁定
#---原理和流程獲得所有的行,第一的頭行..排除,,,在的所有的刪除.
遍曆表格tr獲得tds的所有的id數組.
根據id/id索引來獲得繫結資料源裡面的資料欄位..綁定到個td上..
或者容易的使用mvc架構 Angular JS,Angular 也能綁定,實現dsl 4 html
作者 老哇的爪子 Attilax 艾龍， EMAIL:[email protected]
轉載請註明來源： http://blog.csdn.net/attilax
<table id="table1">
<tr id="tem">
<td id="awd">
awd
</td>
<td id="timex">
timex
</td>
<td id="BusinessName">
BusinessName
</td>
<td id="btn">
<input id="Button2" type="button" value="button" />
</td>
</tr>
</table>
<p> </p>
<p><script src="jquery-1.11.0.min.js"></script> </p>
<script>
bindJson2table("li.json","table1")
function bindJson2table(jsonUrl, tableID) {
$.getJSON(jsonUrl, null,
function(obj) {
$("#" + tableID + " tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//o430
//todox jquery trav tr td
//jq get element list
var tds = $("#tem td");
var prpts = new Array();
for (var i = 0; i < tds.length; i++) {
prpts.push(tds[i].id);
}
//將擷取到的資料動態載入到table中
for (var i = 0; i < obj.length; i++) {
//擷取模板行，複製一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
// row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會出錯，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2.min...中可以運行，這個問題的解決浪費了很長事件，都怪用了比較老的架構
for (var j = 0; j < prpts.length; j++) {
var prpt = prpts[j];
row.find("#" + prpt).text(obj[i][prpt]);
}
// row.find("#awd").text(obj[i].awd); //流水號
// row.find("#timex").text(obj[i].timex); //汽車車牌號
// row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業務名稱
//將新行添加到表格中
row.appendTo("#" + tableID);
}
});
}
</script>
#-----Angular 的實現
<html ng-app> //must jeig ,beirs ma fein.
<script src="angular.min.js"></script>
<script>
function AlbumCtrl($scope) {
$scope.images = [
{"url":" image_01.png", "description":"url 01 description"},
{"url":" image_02.png", "description":"url 02 description"},
{"url":" image_03.png", "description":"url 03 description"},
{"url":" image_04.png", "description":"url 04 description"},
{"url":" image_05.png", "description":"Image 05 description"}
];
}
</script>
<div ng-controller="AlbumCtrl">
<table width="600" border="1" cellspacing="0" cellpadding="0" ng-controller="AlbumCtrl">
<tr>
<td>img</td>
<td>name</td>
<td>op</td>
</tr>
<tr ng-repeat="image in images">
<td>{{image.url}}---------</td>
<td>{{image.description}}</td>
<td>aaa</td>
</tr>
</table>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
