First, set a table skeleton on the JSP page. First, set the display attribute of the table to none, so that it will not be displayed when loading the page,CodeAs follows:
<Table id = "generatedtable" style = "border = 2; display: none;"> <theactive> <tr> <TH style = 'width: 10%; '> first column </Th> <TH style = 'width: 15%;'> second column </Th> <TH style = 'width: 10%; '> third column </Th> <TH style = 'width: 10%;'> fourth column </Th> <TH style = 'width: 3%; '> Column 5 </Th> </tr> </thead> <tbody> <tr id = "clonetr"> <TD> </TD> <TD> </tr> </tbody> </table>
Then, based on this skeleton, Ajax is used to dynamically generate the rows of the table and add the background data to the table.
Ajaxpost ({type: "Get", URL: "<C: URL value = '/logdetails. auth '/> ", data:" datas = "+ datas; // The data to be sent // The object is the Java List Data Set success: function (objects) passed in the background) {// 1, get the tr element var tr =$ ("# clonetr"); $. each (objects, function (index, item) {// clone tr. Each traversal generates a new tr var clonedtr = tr. clone (); VaR _ Index = index; // cyclically traverse every TD element of clonetr and assign a value to clonedtr. children ("TD "). each (function (inner_index) {// assign a switch (inner_index) {Case (0): Condition (this).html (_ index + 1); break; case (1 ): certificate (this).html (item. caller); break; case (2): expires (this).html (item. imsi); break; Case (3): Condition (this).html (item. IMEI); break; Case (4): Condition (this).html (item. osid); break;} // end switch}); // end children. each // append the cloned tr to the clonedtr behind the original tr. insertafter (TR) ;}); // end $ each $ ("# clonetr "). hide (); // hide the tr whose id = clone, because the TD in the TR has no data, if it is not hidden, an empty row $ ("# generatedtable") is displayed in the first row of the generated table "). show () ;}// end success}); // end ajaxpost
if you have a good method, please submit it. Joint discussion and learning