Underscore templates - Example 3
How do I make an underscore templates - example 3?
Utilizing JavaScript within your markup.. What is a underscore templates - example 3? How do you make a underscore templates - example 3? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.
Underscore templates - Example 3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Underscore templates - Example 3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .outer { border-collapse: collapse; font: 12px/16px arial, sans-serif; margin: 20px; padding: 0;
}
.outer td,
.outer th { border: solid 1px #ddd; margin: 0; padding: 5px;
}
.outer th,
.outer div.th { background: #eee; font-weight: bold;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <table class="outer"> <thead> <tr> <th>ID</th> <th>State</th> </tr> </thead> <tbody> </tbody>
</table>
<script type="text/html" id='table-data'> <% _.each(items,function(item,key,list){ %> <tr> <td><%= key %></td> <td><%= item.name %></td> </tr> <% }) %>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Underscore templates - Example 3 - Script Codes CSS Codes
.outer { border-collapse: collapse; font: 12px/16px arial, sans-serif; margin: 20px; padding: 0;
}
.outer td,
.outer th { border: solid 1px #ddd; margin: 0; padding: 5px;
}
.outer th,
.outer div.th { background: #eee; font-weight: bold;
}
Underscore templates - Example 3 - Script Codes JS Codes
var items = [ {name:"Pennsylvania"}, {name:"NJ"}, {name:"Florida"}, {name:"California"}, {name:"Texas"}, {name:"New Mexico"}, {name:"Arizona"}, {name:"Maine"}, {name:"NH"}, {name:"Montana"}, {name:"Oklahoma"}
]
var tableTemplate = $("#table-data").html();
var data = _.template(tableTemplate,{items:items});
$("table.outer tbody").html(data);
Developer | EY-Intuitive |
Username | ey_intuitive |
Uploaded | January 17, 2023 |
Rating | 3 |
Size | 2,568 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Draggable Timeline Demo | 4,548 Kb |
A Pen by EY-Intuitive | 3,258 Kb |
Pure CSS3 Flyout Navigation | 3,500 Kb |
Google Material Design Nav Submenu Animation | 3,009 Kb |
Star Wars Name Generator | 3,490 Kb |
Step Indicator | 3,692 Kb |
Animated Menu with Submenus | 5,647 Kb |
UI Color Shade Previewer | 3,159 Kb |
Jquery Flyout Navigation | 2,667 Kb |
Hidden Push Nav with Flyouts | 3,948 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Social.svg.min | Larsenwork | 13,849 Kb |
Spin | Elalemanyo | 8,262 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Hello People | Danburrows | 2,365 Kb |
Loading... | Adamjacob | 2,384 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
FCC_Twitch.tv | MitchES | 3,466 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!