I am trying to make a basic Node.js application and I've used the Easy Node Authentication guide for the Login.
I then wanted to add a dynamic table where you can insert and delete rows as and when needed. I've managed to do that, but as the modifications are not being saved, it is lost on refreshing the page.
I tried to save it to excel and import and stuff but that isn't working. What would be the best way to do this?
The code snippet for the profile view is below. Thanks.
<html>
<head>
<title>Node Authentication</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
body { padding-top:80px; word-wrap:break-word; }
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body onload="hide('form1')" onload="sqlconnection()" >
<div class="container">
<div class="page-header text-center">
<h1><span class="fa fa-anchor"></span> Profile Page</h1>
<a href="/logout" class="btn btn-default btn-sm">Logout</a>
</div>
<div class="row">
<!--Google Information -->
<script>
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
<div class="col-sm-12">
<div class="well">
<h3 class="text-danger" id='abc'><center><span class="fa fa-google-plus"></span> Google</center></h3>
<p><center>
<!--<strong>id</strong>: <%= user.google.id %><br>
<strong>token</strong>: <%= user.google.token %><br>
<strong>email</strong>: <%= user.google.email %><br>-->
Welcome <strong> <%= user.google.name %></strong> ! You are now <strong>logged in!</strong>
</center></p>
</div>
</div>
<script>
function show(id)
{
document.getElementById(id).style.display = 'block';
}
</script>
<script>
function addRow(tableID,nf,pf) {
document.getElementById('form1').style.display = 'none';
var table = document.getElementById(tableID);
var xname = document.getElementById(nf).value;
var xprice = document.getElementById(pf).value;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = xname;
var cell3 = row.insertCell(2);
cell3.innerHTML = xprice;
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
<form onsubmit="return false" id="form1">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" id="pname">
</div>
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" name="price" id="pricefield">
</div>
<button type="reset" onclick="addRow('dataTable','pname','pricefield')" class="btn btn-warning btn-lg">Add Item</button>
</form>
<br>
<div class="col-sm-12">
<div>
<h2> <font color=midnightblue><center>Chocolates</center></font></h3>
<br>
<center><input type="button" value="Add Item" onclick="show('form1')" class="btn btn-default btn-sm"/>
<input type="button" value="Delete Item" onclick="deleteRow('dataTable')" class="btn btn-default btn-sm"/>
</center>
</div></div>
<br>
<br>
<table id="dataTable">
<tr>
<th>Select</th>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" name="chk"/></td>
<td>MnMs</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"/></td>
<td id='blah'>Lindt</td>
<td>15</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
via Yash Malkan
No comments:
Post a Comment