Untitled

avatar
unknown
plain_text
3 years ago
1.2 kB
7
Indexable
<!DOCTYPE html>
<html>
<head>
  <title>Employee Cart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <table id="employeeTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone Number</th>
        <th>Photo</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    $(document).ready(function() {
      // Make AJAX request to fetch JSON data
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/users',
        dataType: 'json',
        success: function(data) {
          // Iterate over each user in the JSON data
          $.each(data, function(index, user) {
            // Append a new row to the table for each user
            var row = $('<tr>');
            row.append($('<td>').text(user.name));
            row.append($('<td>').text(user.phone));
            row.append($('<td>').html('<img src="https://via.placeholder.com/50" alt="User Photo" height="50">'));
            row.append($('<td>').text(user.email));

            // Append the row to the table body
            $('#employeeTable tbody').append(row);
          });
        }
      });
    });
  </script>
</body>
</html>
Editor is loading...