Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (105 sloc) 2.8 KB
<!DOCTYPE html>
<html>
<head>
<title>Templates</title>
<!-- Polyfills for WebComponents Support -->
<script type="text/javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- For easier DOM manipulation -->
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>
<script>
// CHECK SUPPORT
function supportsTemplate() {
return 'content' in document.createElement('template');
}
// ADD ROW
function addRow(){
// Grab our template
var t = document.querySelector('template#table-row').content;
// Optional -- Modify template
var form = document.querySelector('#data-binding-form');
var age = form.querySelector("#age-field").value; //var age = $("#data-binding-form #age-field"); // Equiv
var name = form.querySelector("#name-field").value;
var gender = form.querySelector("#gender-field").value;
t.querySelector("td:first-child").innerHTML = name;
t.querySelector("td:nth-child(2)").innerHTML = age;
t.querySelector("td:last-child").innerHTML = gender;
// Clone/activate template & add to page
var clone = document.importNode(t, true);
var allRows = document.querySelectorAll("table tr");
var lastRow = allRows[allRows.length- 1];
lastRow.parentNode.insertBefore(clone, lastRow.nextSibling);
return false;
}
$(function(){
if (supportsTemplate()) {
console.log("Good to go!");
} else {
console.log("Use old templating techniques or libraries.");
}
});
</script>
</head>
<body>
<h3>"Data Binding"</h3>
<form id="data-binding-form" onsubmit="return addRow()" style="width: 100%;">
<div style="float: left; width: 50%;">
<div>
<label for="name-field">Name:</label>
<input type="text" name="name" id="name-field" />
</div>
<div>
<label for="age-field">Age:</label>
<input type="text" name="age" id="age-field" />
</div>
<div>
<label for="gender-field">Gender:</label>
<input type="text" name="gender" id="gender-field" />
</div>
</div>
<div style="float: right; width: 50%;">
<input type="submit" name="Submit" value="Submit"/>
</div>
</form>
<style>
body {
color: rgba(0, 0, 0, 0.8);
}
table {
text-align: center;
border: 1px solid black;
width: 100%;
}
thead {
background-color: #119DA4;
color: #fff;
}
label {
display:inline-block;
width: 50px;
}
</style>
<table id="persons-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chester Examplefield</td>
<td>92</td>
<td>Female</td>
</tr>
<template id="table-row">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</template>
</tbody>
</table>
</body>
</html>