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>
<!-- 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>
function supportsTemplate() {
return 'content' in document.createElement('template');
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;
if (supportsTemplate()) {
console.log("Good to go!");
} else {
console.log("Use old templating techniques or libraries.");
<h3>"Data Binding"</h3>
<form id="data-binding-form" onsubmit="return addRow()" style="width: 100%;">
<div style="float: left; width: 50%;">
<label for="name-field">Name:</label>
<input type="text" name="name" id="name-field" />
<label for="age-field">Age:</label>
<input type="text" name="age" id="age-field" />
<label for="gender-field">Gender:</label>
<input type="text" name="gender" id="gender-field" />
<div style="float: right; width: 50%;">
<input type="submit" name="Submit" value="Submit"/>
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 {
width: 50px;
<table id="persons-table">
<td>Chester Examplefield</td>
<template id="table-row">