Paip. Improving efficiency--data binding to table principles and processes angular JS jquery implementation

Paip.Increase Efficiency--data is bound toTablePrinciples and processes angular JS jqueryImplement

Html

#--keyword 1

#--- principles and processes 1

#----JQ Implementation of code 1

#-----The implementation of Angular 3

#--keyword

jquery Traversal table TR TD

Angular Template Bindings

#---Principles and Processes

Get all the lines , the first header line : Exclude ,,, all the deletions in the .

Iterate through the table tr to get all the IDs of the TDs array .

The data field inside the bound data source is obtained according to the id/id index : bound to a TD on ..

or easy to use MVC Framework Angular Js,angular can also be bound to implement DSL 4 HTML

Author of Old Wow's Paw attilax Ayron, email:[email protected]
Reprint please indicate source: Http://blog.csdn.net/attilax

#----JQCode of Implementation

<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 (); to delete the TR except the template line

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);

}

dynamically loading the acquired data into the table

for (var i = 0; i < obj.length; i++) {

get template row, copy one row

var row = $ ("#tem"). Clone ();

Add a new row of buttons to the click Event

Row.find ("#btn input"). Click ({name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);

Note: In the jquery1.4.2 , the above method will be wrong, the specific reason I do not know, anyway 1.7.1 This writing is no problem

If the above code is not good, you can try

Row.find ("#btn input"). Bind ("click", {Name:obj[i]. Chrcarnumber, Back:obj[i]. Ckrid}, operation);

Pro-Test the above code in 1.4.2.min ... can be run, this problem is solved by wasting a long time, it is strange to use the older framework

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); Serial Number

Row.find ("#timex"). Text (Obj[i].timex); Car license plate number

Row.find ("#BusinessName"). Text (Obj[i].     Bcrname); The name of the business to be processed

add a new row to a table

Row.appendto ("#" + TableID);

}

});

}

</script>

#-----The realization of Angular

<script src= "Angular.min.js" ></script>

<script>

function Albumctrl ($scope) {

$scope. Images = [

{"url": "Image_01.png", "description": "URL description"},

{"url": "Image_02.png", "description": "URL description"},

{"url": "Image_03.png", "description": "URL description"},

{"url": "Image_04.png", "description": "URL description"},

{"url": "Image_05.png", "description": "Image description"}

];

}

</script>

<div ng-controller= "Albumctrl" >

<table width= "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>