A Pen by Ismael Ors.

Adding-New-Rows.markdown

Adding New Rows

Adding New Rows with Handlebars & jQuery

A Pen by Ismael Ors on CodePen.

License.

index.html

<div class="large-3 large-4 columns">
  <table class="responsive menutable">
		<thead>
			<tr><th>Name</th>
			<th>Price</th>
			<th>Actions</th>
		</tr></thead>
		<tbody>
			
				<tr data-idmenu="1">
					<td class="colname">
						Ned Stark
					</td>
					<td class="colprice">
						3000 €
					</td>
					<td class="colactions">
						<button type="button" class="button radius  small editButton"><i class="fa fa-edit fa-lg"></i></button>
						<button type="button" class="button radius alert small deleteButton"><i class="fa fa-trash-o fa-lg"></i></button>
					</td>
				</tr>

		</tbody>
	</table>
</div>



<div class="large-3 small-2 columns">
  <input type="text" class="name" placeholder="name"/>
<input type="text" class="price" placeholder="price"/>
<button type="submit" class="button radius success createButton"><i class="fa fa-plus fa-lg"></i> &nbsp; Add new one</button>
</div>


<script id="newRow" type="text/x-handlebars-template">
  
  <tr data-idMenu="{{idmenu}}">
	<td class="colname">{{name}}</td>
	<td class="colprice">{{price}} &euro;</td>
	<td class="colactions">
	<button type="button" class="button radius  small editButton"><i class="fa fa-edit fa-lg"></i>
	</button>
	<button type="button" class="button radius alert small deleteButton"><i class="fa fa-trash-o fa-lg"></i>
	</button>
    </td>
</tr>

</script>

script.js

$(document).ready(function(){
  
  $(".createButton").click(addNewRow);
  
});

function addNewRow(){
  var source   = $("#newRow").html();
  var template = Handlebars.compile(source);
  var number = 1 + Math.floor(Math.random() * 6);
  var context = { idmenu: number , name: $(".name").val(), price: $(".price").val()};
  var html    = template(context);
  
  $(".menutable tr:last").after(html);
}