יום שישי, 12 ביולי 2013

Listing the operators in html table

The following code shows the list of the operators in html table.

  1: <!DOCTYPE html>
  2:  <style>
  3:  .imgstl
  4:    {
  5:   
  6:    }
  7:  .imgstl2
  8:    {
  9:    margin:2px;
 10:    border:1px solid #0000ff;
 11:    height:50px;
 12:    width:50px;
 13:    float:left;
 14:    text-align:center;
 15:    }
 16:  div.img img
 17:    {
 18:    display:inline;
 19:    margin:3px;
 20:    border:1px solid #ffffff;
 21:    }
 22:  div.img a:hover img
 23:    {
 24:    border:1px solid #0000ff;
 25:    }
 26:  div.desc
 27:    {
 28:    text-align:center;
 29:    font-weight:normal;
 30:    width:120px;
 31:    margin:2px;
 32:    }
 33:  </style>
 34: <html lang="en">
 35: <head>
 36:     <title>Routes Web API</title>
 37:     <link href="../../Content/Site.css" rel="stylesheet" />
 38:  
 39: </head>
 40:    
 41: <body id="body" >
 42:     <div class="main-content">
 43:         <div>
 44:             <h1>All Operators</h1>
 45:             <ul id="OperatorsList"/>
 46:         </div>
 47:         <div>
 48:             <input type="button" id="CallWebApi" value="Call web api" />
 49:             <p id="product" /> 
 50:         </div>
 51:     </div>
 52: 
 53:     <div id="dynamicTable">
 54:     </div>
 55: 
 56:       <script src="../../Scripts/jquery-1.8.2.js"></script>
 57:        <script> 
 58:            $(document).ready(function () {
 59:                
 60:                $("#CallWebApi").on("click", function (event) {
 61: 
 62:                    // create table
 63:                    var $table = $('<table>');
 64:                    // caption
 65:                    $table.append('<caption>Operators List</caption>')
 66:                    // thead
 67:                    .append('<thead>').children('thead')
 68:                    .append('<tr />').children('tr').append('<th>Photo</th><th>Name</th>');
 69: 
 70:                    //tbody
 71:                    var $tbody = $table.append('<tbody />').children('tbody');
 72: 
 73:                    var theOperatorTable = $("#OperatorTable");
 74:                             
 75:                    // Send an AJAX request
 76:                   
 77:                    $.getJSON("api/OperatorData/",
 78:                    function (data) {
 79:                        // On success, 'data' contains a list of products.
 80:                        $.each(data, function (key, val) {
 81:                            
 82:                            var theOperatorName = val.Name ;
 83: 
 84:                            var theOperatorImage = val.OperatorImage;
 85:                          
 86:                            var theNewRow = $tbody.append('<tr />').children('tr:last');
 87: 
 88:                            var theNewTD = theNewRow.append("<td></td>").children('td:last');
 89: 
 90:                            $('<img  />', { src: "http://localhost:20385/api/Images/" + theOperatorImage }).
 91:                              appendTo(theNewTD);
 92: 
 93:                       //     $('#table_header td:nth-child(3)').html('the content');
 94: 
 95:                            theNewRow.append("<td>" + theOperatorName + "</td>")
 96:                       
 97:                        });
 98: 
 99:                        // add table to dom
100:                        $table.appendTo('#dynamicTable');
101: 
102:                    });                 
103:                });
104:          });
105:         
106:        </script>
107: </body>
108: </html>

Capture48


Resources
http://www.jquery4u.com/plugins/30-amazing-jquery-tables/

ב-
תוויות:

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)