function addData() {
var rows = "";
var ID = document.getElementById("id").value;
var Task = document.getElementById("task").value;
rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>";
var tbody = document.querySelector("#table tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
}
<body>
<form onsubmit="" method="POST">
ID:
<input type="text" id="id" required>New task:
<br>
<textarea id="task" required></textarea>
<br>
<input type="submit" value="Add" onclick="addData()">
</form>
<h3>Task Table</h3>
<div id="excell">
<table id="table" cellspacing="0px" cellpadding="25px" text-align="center">
<thead>
<tr>
<td>ID</td>
<td>Task</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
I'm learning Javascript and I'm trying to implement a small "ID and Task" table, but somehow it only works when I enter only 1 type of data such as only ID or only task, when I enter 2 data at the same time, nothing happens. I'd be grateful if you tell me what is the problem and how can I fix it. Thank you.
Here's my HTML
<body>
<form onsubmit="" method="POST">
ID:
<input type="text" id="id" required>
New task:<br>
<textarea id="task" required></textarea>
<br>
<input type="submit" value="Add" onclick="addData()">
</form>
<h3>Task Table</h3>
<div id = "excell">
<table id = "table" cellspacing = "0px" cellpadding = "25px" text-align = "center">
<thead>
<tr>
<td>ID</td>
<td>Task</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
and here's my JS
function addData() {
var rows = "";
var ID = document.getElementById("id").value;
var Task = document.getElementById("task").value;
rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>";
var tbody = document.querySelector("#table tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
}
Actual problem with your code is, you have used Submit button. Normally when a submit button is hit it post the data to action property of the form tag, which means transfer the page to next; if action property is not given, it give flickering effect and stay with current page and made all components with empty. The same is happen in your code also.
Better Change the code
<input type="Submit" value="Add" onClick="addData();"/>
into
<input type="BUTTON" value="Add" onClick="addData();"/>
and try its worked fine.
Related
guys, I am going to develop a simple primary code to get data from the user and add to the table. I have already done the mission but there is some problem I need to ask.
I want to put my operation element (Edit | Delete) also in a cell just like entered first name and last name.
I know how to use "td" for first and last name but I dunno how to add "td" element to put (Edit | Delete) also in a cell of my table
function AddStudents(event){
var x = document.getElementById('fname').value ;
var y = document.getElementById('lname').value ;
console.log("LINE 1");
var ftd = document.createElement('tr');
var ft = document.createElement('td');
var text = document.createTextNode(fname.value);
ft.appendChild(text);
console.log("LINE 2");
var nt = document.createElement('td') ;
var text2 = document.createTextNode(lname.value);
nt.appendChild(text2);
var ot = document.createElement('a');
var neu = document.createElement('td') ;
var od = document.createElement('a');
var sp = document.createElement('a');
ot.innerHTML = ' Edit' ;
od.innerHTML = ' Delete';
sp.innerHTML = ' | ' ;
ot.href = "#" ;
od.href = "#" ;
console.log("LINE 3");
ftd.appendChild(ft)
ftd.appendChild(nt)
ftd.appendChild(ot)
ftd.appendChild(sp)
ftd.appendChild(od)
console.log("LINE 4");
document.getElementById("students").appendChild(ftd);
}
and this my html code :
<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
</br>
</br>
<button id="add" onclick="AddStudents(this)">Add Student</button>
<h3>List Of Students</h3>
<table id="students" cellpadding = "7px" text-align = "center" border="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Operation</td>
</tr>
<tbody></tbody>
</table>
You will need to add the edit and delete links to a td and then append the td to your table.
To do this create a td element, create the links, create a span for the bar and then append the links and span to your td. Now you have a proper table cell which you can append to the table.
As an aside, I recommend you use more descriptive variable names so other people can understand your code easier. It looks like this is likely an assignment your professor would also be able to give you help.
var td = document.createElement('td');
var editLink = document.createElement('a');
var deleteLink = document.createElement('a');
var span = document.createElement('span');
editLink.innerHTML = 'Edit';
editLink.href="#";
deleteLink.innerHTML = 'Delete';
deleteLink.href = "#";
span.innerHTML = '|';
td.appendChild(editLink);
td.appendChild(span);
td.appendChild(deleteLink);
Here is some code which does that, but ensure you understand why this creates a table cell instead of just copy pasting it.
You can simply put a <button> in a <td> element directly:
<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
</br>
</br>
<button id="add" onclick="AddStudents(this)">Add Student</button>
<h3>List Of Students</h3>
<table id="students" cellpadding = "7px" text-align = "center" border="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Operation</td>
<td><button class="" id="btnEdit">Edit</button></td>
<td><button class="" id="btnDelete">Delete</button></td>
</tr>
<tbody></tbody>
</table>
If you're using something like Bootstrap then you can also enter classes where I left empty quotation marks to style the button how you'd like.
You can do this in a better way using jQuery
function AddStudents(){
$("#notification").html('');
var fname= $("#fname").val();
var lname=$("#lname").val();
if(fname!='' && lname!=''){
$("#students tbody").append("<tr>");
$("#students tbody").append("<td>"+fname+"</td>");
$("#students tbody").append("<td>"+lname+"</td>");
$("#students tbody").append("<td><a href='#' class='btnedit'>Edit</a> | <a href='#' class='btndelete'>Delete </a></td>");
$("#students tbody").append("</tr>");
}
else{
$("#notification").html('Please enter First Name and Last Name');
}
}
$(document).on("click",".btnedit",function(){
//Implement Edit functionality here
alert('edit');
});
$(document).on ("click",".btndelete",function(){
//Implement delete functionality here
alert('delete');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='notification'></div>
<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
</br>
</br>
<button id="add" onclick="AddStudents()">Add Student</button>
<h3>List Of Students</h3>
<table id="students" cellpadding = "7px" text-align = "center" border="1">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Operation</td>
</tr></thead>
<tbody></tbody>
</table>
I added event handling for your Edit and Delete links since it is created runtime.
I have run to a problem with my JavaScript, I'm new to javascript and have just started integrating it with my web application. I have my javascript here:
<script type="text/javascript">
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
function findTotal(){
var arr = document.querySelectorAll("#datatable td:nth-child(2)");
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
This addRow Function here serves as my function in adding a cell each type I click "add entry" Here's a bit of my HTML:
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nature of Collection</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<h6> <label>Date:<span></span>
</label>{{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br></p>
</fieldset></h3>
</div><!-- COL5 END -->
I just took out the HTML codes that are involved with this problem.
I am using addRow() to add each function. The Second column gets a numeric value. For example. 200.00 or 232 r 2.2 What I wanted to do is to get the total while I'm adding it real-time. I have inspected the adding of cells in the developer options in the Mozilla browser it shows that the digits are falling to each of the tr's second td.
So I used var arr = document.querySelectorAll("#datatable td:nth-child(2)");
in my totaling function hoping that I would get the list and evaluate it. However I am unable to do this, there's nothing showing in my total UI.
or.. Am I really getting my amounts in the using that?
This worked when I was implementing it using checkboxes so I know how it would work. Every time I add a value it shows on the total box whenever something gets added. But here it's different. I found an answer that says nth-child gets non-live object list. Should I make the objects live before I can evaluate it in the total?
I'm really stuck at this part. If you have any ideas on how to fix this please do help me. or if you could give me an alternative way to add cells then totaling it real-time that would also help.
I could make do with the submission type, but the page gets reloaded and it will be a hassle for the user to scroll down again. This part of the app, when you add a cell it just pops there without the page reloading, as to why I used javascript to implement this function.
Here are pics of how it works:
Console shows:
Any help is appreciated. Thank you very much!
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
findTotal();
}
function findTotal(){
var arr = document.querySelectorAll("#datatable td:nth-child(2)");
var tot=0;
for(var i=0;i<arr.length;i++){
var enter_value = Number(arr[i].textContent) //id u want do parseInt(enter_value)
if(enter_value)
tot += Number(arr[i].textContent);
}
document.getElementById('total').value = parseInt(tot);
}
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nature of Collection</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<h6> <label>Date:<span></span>
</label>{{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br></p>
</fieldset></h3>
</div><!-- COL5 END -->
This should work.
Not the best code but a hot fix for yours.
I recomend you to look into html data- attributes
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
findTotal();
}
function findTotal(){
var arr = document.querySelectorAll("#datatable td:nth-child(2)");
var tot=0;
for(var i=0;i<arr.length;i++){
tot += parseInt(arr[i].innerHTML);
}
document.getElementById('total').value = tot;
}
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nature of Collection</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<h6> <label>Date:<span></span>
</label>{{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br>
</fieldset></h3>
</div><!-- COL5 END -->
This is the faulty code:
var arr = document.querySelectorAll("#datatable td:nth-child(2)");
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
In here, arr is a collection of DOM nodes, matching #datatable td:nth-child(2) selector. You're trying to sum up their value properties. However, <td> elements do not have a value. You might want to try getting their innerText property:
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].innerText))
tot += parseInt(arr[i].innerText);
}
Note you're closing a </p> you never opened just after the total field. There might be other problems with your script, but this one caught my eye.
See it working here. (I've stripped it down to minimum).
<html>
<head>
<title>Student form</title>
</head>
<body>
<div id="data">
Form : having 4 fields and 1 button to add data to table.
<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData()">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>
Script : AddData() function submits data from form to the table and is invoked when button is clicked.
<script>
function AddData()
{
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td>
<td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>
</body>
</html>
Consider without jQuery. Change the "Add" button to type button (it's submit by default) so it doesn't submit the form. Then use DOM features to get the elements and their values, and to build the new row.
Be careful though, as a return in any of the inputs will submit the form so you may want to add a submit listener and prevent that, or use inputs without a form.
function addData(el) {
var table = document.getElementById('list');
var tr = table.insertRow();
el.form.querySelectorAll('input').forEach(function(el) {
var cell = tr.appendChild(document.createElement('td'));
cell.textContent = el.value;
});
}
<form align="center">
<h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
<button type="button" onclick="addData(this)">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1">
<thead>
<tr>
<td>Name<td>Branch<td>Address<td>Contact
</tr>
</thead>
</table>
The only "modern" feature above is the use of forEach with a NodeList, and that can be replaced fairly easily with a for loop or [].forEach.call(...) to get compatibility back to IE 8.
Try this .
Add the query library link appentTo() its a jquery Object
Change the button type with submit
You need return the onsubmit for prevent the page refresh otherwise page was reloaded on every time submit
function AddData() {
var rows = "";
var name = document.getElementById("Name").value;
var branch = document.getElementById("branch").value;
var address = document.getElementById("address").value;
var contact = document.getElementById("contact").value;
rows += "<tr><td>" + name + "</td><td>" + branch + "</td><td>" + address + "</td><td> " + contact + "</td></tr> ";
$(rows).appendTo("#list tbody");
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">
<form align="center" onsubmit="return AddData()">
<h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
<button type="submit">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1">
<thead>
<tr>
<td>Name</td>
<td>Branch</td>
<td>Address</td>
<td>Contact</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
you can pass event to AddDate(e) and use e.preventDefault().
<html>
<head>
<title>Student form</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">
<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData(event)">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>
<script>
function AddData(e)
{
e.preventDefault();
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td><td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>
</body>
</html>
I have been able to make this work as it adds into <div></div> tags now I want to remove this array numbers 0,1,2,3 and feed the data into <div></div> tags in HTML, How can this be done, How do I make it insert inside the div tags
<html>
<head></head>
<title>Js test</title>
<h1>Js Test</h2>
<body>
<script type="text/javascript">
var data = new Array();
function addElement(){
data.push(document.getElementById('ins_name').value);
data.push(document.getElementById('gpa').value);
data.push(document.getElementById('da').value);
document.getElementById('ins_name').value='';
document.getElementById('gpa').value='';
document.getElementById('da').value='';
display();
}
function display(){
var str = '';
for (i=0; i<data.length;i++)
{
//str+="<tr><td>" + data[i] + "</td></tr>";
"<tr>
<td align=center width=176>Institution </td>
<td align=center>GPA</td>
<td align=center width=187>Degree Awarded</td>
</tr>"
"<tr>
<td align=center width=176> </td>
<td align=center> </td>
<td align=center width=187> </td>
</tr>"
}
document.getElementById('display').innerHTML = str;
}
</script>
<form name="jamestown" id="jamestown" method="post" action="samris.php" />
Institution : <input type="text" name="ins_name" id="ins_name" /></br>
GPA : <input type="text" name="gpa" id="gpa" /></br>
Degree Awarded : <input type="text" name="da" id="da" /></br>
</p>
<input type="button" name="btn_test" id="btn_test" value="Button Add Test" onClick='addElement()'; /></br>
</form>
<div id=display></div>
</body>
</html>
Since you've been adding more and more requirements in the comments, the innerHTML += "" approach stops working.
I advice you to create elements using document.createElement and add them to your document using Node.appendChild.
It's not really an answer to the initial question, but I figured it helps you more than continuing conversation in the comments. Maybe you can edit your question to reflect the additional requirements.
Let me know if there's stuff I used that you don't yet understand. Happy to elaborate!
var inputIds = ["ins_name", "gpa", "da"];
var inputElements = inputIds.map(getById);
var tbody = getById("display");
// Create a new row with cells, clear the inputs and add to tbody
function addRow() {
// Create a row element <tr></tr>
var row = document.createElement("tr");
inputElements.forEach(function(input) {
// For each input, create a cell
var td = document.createElement("td");
// Add the value of the input to the cell
td.textContent = input.value;
// Add the cell to the row
row.appendChild(td);
// Clear the input value
input.value = "";
});
// Add the new row to the table body
tbody.appendChild(row);
}
getById("btn_test").addEventListener("click", addRow);
// I added this function because document.getElementById is a bit too long to type and doesnt work with `map` without binding to document
function getById(id) {
return document.getElementById(id);
}
Institution : <input type="text" name="ins_name" id="ins_name" /><br>
GPA : <input type="text" name="gpa" id="gpa" /><br>
Degree Awarded : <input type="text" name="da" id="da" /><br>
<input type="button" id="btn_test" name="btn_test" value="Add Test"/><br>
<table>
<thead>
<tr>
<th>Institution</th>
<th>GPA</th>
<th>Degree</th>
</tr>
</thead>
<tbody id="display">
</tbody>
</table>
Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.