Jquery Ajax automatically generates table (1)

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.