add auto-increment or timestamp - javascript, jstorage

add auto-increment or timestamp - javascript, jstorage - javascript

I'm trying to implement jstorage on my website. I'm new to JavaScript and thus need some help here.
jstorage requires Key and Value to be given for each saved row.
I would like Key to be filled in automatically with either with auto-increment value or timestamp, whichever is easier - values need to be unique.
Here is the whole code:
<!DOCTYPE html>
<html>
<head>
<title>jStorage - simple JavaScript plugin to store data locally</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{
font-family: Sans-serif;
font-size: 13px;
color: #333;
background: blue;
}
a {
color: red;
}
table{
border: 1px solid white;
;
}
h1{
padding-top: 50px;
font-size: 26px;
font-weight: bold;
border-bottom: 3px solid #CDEB8B;
}
h2{
font-size: 18px;
font-weight: bold;
border-top: 1px solid #EEE;
border-bottom: 3px solid #CDEB8B;
margin-top: 20px;
padding-top: 20px;
}
h3{
font-size: 14px;
font-weight: bold;
color: red;
}
td{
padding: 3px;
border-right: 1px solid #CDEB8B;
border-bottom: 1px solid #CDEB8B;
}
thead{
background: url(img/gradientform.png) repeat-x; ;
color: white;
}
.container{
width: 190px;
margin: 10px auto;
}
.delimg {
background: url(img/details_close.png) no-repeat;
width: 20px;
height: 20px;
}
.addimg {
background: url(img/details_open.png) no-repeat;
width: 20px;
height: 20px;
}
</style>
<script src="js/jquery.js"></script>
<script src="static/jquery.json-2.3.js"></script>
<script src="static/jstorage.js"></script>
<script>
function insert_value(){
var row = document.createElement("tr"),
key = document.getElementById('key').value,
val = document.getElementById('val').value;
if(!key){
alert("KEY NEEDS TO BE SET!");
document.getElementById('key').focus();
return;
}
$.jStorage.set(key, val);
document.getElementById('key').value = "";
document.getElementById('val').value = "";
reDraw();
}
function get_value(){
var value = $.jStorage.get(document.getElementById("key2").value);
alert(value);
document.getElementById('key2').value = "";
}
function reDraw(){
var row, del, index;
var rows = document.getElementsByTagName("tr");
for(var i=rows.length-1; i>=0; i--){
if(rows[i].className == "rida"){
rows[i].parentNode.removeChild(rows[i]);
}
}
index = $.jStorage.index();
for(var i=0; i<index.length;i++){
row = document.createElement("tr");
row.className = "rida";
var t = document.createElement("td");
t.innerHTML = index[i];
row.appendChild(t);
t = document.createElement("td");
t.innerHTML = $.jStorage.get(index[i]);
row.appendChild(t);
del = document.createElement("a");
del.href = "javascript:void(0)";
del.innerHTML = "<div class='delimg'></div>";
(function(i){
del.onclick = function(){
$.jStorage.deleteKey(i);
reDraw();
};
})(index[i])
t = document.createElement("td");
t.appendChild(del)
row.appendChild(t);
document.getElementById("tulemused").appendChild(row);
}
}
</script>
<!-- Exception Hub start -->
<script type="text/javascript">
var ehHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + ehHost + "js.exceptionhub.com/javascripts/eh.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
ExceptionHub.setup("b83fb652800fa143596deb6600fd9a2d", 116, 'production');
</script>
<!-- Exception Hub end -->
</head>
<body>
<div class="container">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<thead>
<tr><td width="120">KEY</td><td>VALUE</td><td width="50"> </td></tr>
</thead>
<tbody id="tulemused"></tbody>
<tfoot>
<tr>
<td><input type="text" id="key" name="key" value="" style="width: 110px;" /></td>
<td><input type="text" id="val" name="val" value="" style="width: 98%" /></td>
<td><div class="addimg"></div></td>
</tr>
<tr>
<td><input type="text" id="key2" name="key2" value="" style="width: 110px;" /></td>
<td>Clicking "GET" alerts the value for provided key with the method <em>$.jStorage.get(key)</em></td>
<td>GET</td>
</tr>
</tfoot>
</table>
<script>reDraw()</script>
</body>
</html>

JavaScript:
function uniqid()
{
var newDate = new Date;
return newDate.getTime();
}

Related

HTML Form resets my Javascript variable [duplicate]

This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 4 years ago.
Good day!
My form has javascript functions for my buttons for adding rows from table and resetting the text fields in the form itself.
In my add button, I have an incrementing variable, rowCount, for counting the row. It works well and works what I expected. When I put it inside the <form></form> tag, it stuck at 2, doesn't increment and doesn't add rows at all.
Here's my code for our reference and also to be debugged. Thanks in advance!
var rowCount = 1;
function addRow() {
var table = document.getElementById('tblOrder');
rowCount = rowCount + 1;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
cell0.innerHTML = "<input type='text'>";
cell1.innerHTML = "<input type='number'>";
cell2.innerHTML = "<input type='text'>";
cell3.innerHTML = "<input type='text'>";
cell4.innerHTML = "<input type='text'>";
cell5.innerHTML = "<input type='text'>";
alert(rowCount)
}
function resetForm() {
document.getElementById('orderForm').reset();
alert('All cleared!')
}
body {
font-family: Calibri;
font-weight: bold;
}
#main {
width: 90%;
border: 1px solid black;
margin: auto;
position: relative;
padding-bottom: 10px;
}
#mainTitle {
text-align: center;
text-decoration: underline;
/* font-weight: bold; */
font-size: 36px;
margin-top: 20px;
margin-bottom: 20px;
}
#cust, #prod {
width: 90%;
position: relative;
margin: auto;
border: 1px solid black;
padding: 20px;
}
#cust {
margin-bottom: 20px;
}
#prod {
margin-bottom: 10px;
}
#custTitle, #prodTitle {
color: blue;
font-size: 25px;
/* font-weight: bold; */
text-decoration: underline;
margin-bottom: 20px;
/* position: relative; */
}
#cust p {
display: block;
}
#cust input {
display: inline;
}
#right {
position: absolute;
top: 0;
right: 0;
padding: 10px;
/* border: 1px solid black; */
}
#right p {
right: 0;
}
#tblOrder {
width: 100%;
border: 1px solid black;
}
#tblOrder thead {
background-color: darkgreen;
color: white;
font-size: 18px;
}
#tblOrder td {
text-align: center;
padding: 5px;
}
#inp1 {
width: 5%;
}
#inp2 {
width: 10%;
}
#inp3, #inp5, #inp6 {
width: 15%;
}
#inp4 {
width: 40%;
}
#tblOrder tr td input {
width: 95%;
}
#add {
color: blue;
font-weight: bold;
background-color: white;
border: 1px solid white;
margin-top: 10px;
}
#foot {
position: relative;
width: 90%;
margin: auto;
/* border: 1px solid black; */
}
#buttons {
position: relative;
left: 0;
/* display: inline; */
}
#total {
position: absolute;
right: 0;
/* display: inline; */
}
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link type='text/css' rel='stylesheet' href='style.css'>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id='main'>
<div id='mainTitle'>
Order Form
</div>
<form id='orderForm'>
<div id='cust'>
<div id='custTitle'>
Customer
</div>
<div id='left'>
<p>Customer Name: <input type='text' size=80></p>
<p>Address: <input type='text' size=100></p>
<p>Contact Name: <input type='text' size=80></p>
<p>Phone: <input type='text' size=15>
Mobile: <input type='text' size=15></p>
<p>E-mail Address: <input type='text' size=30>#<input type='text' size=10>.com</p>
</div>
<div id='right'>
<p>Order Date: <input type='text' placeholder='mm/dd/yyyy' size=11></p>
<p>Order Number: <input type='text' size=5></p>
</div>
</div>
<div id='prod'>
<div id='prodTitle'>
Products to Order
</div>
<div id='order'>
<table id='tblOrder'>
<thead>
<td id='inp1'>Unit</td>
<td id='inp2'>Quantity</td>
<td id='inp3'>Product Code</td>
<td id='inp4'>Description</td>
<td id='inp5'>Unit Price</td>
<td id='inp6'>Total Price</td>
</thead>
<tbody>
<tr>
<td><input type='text'></td>
<td><input type='number'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</tbody>
</table>
<button id='add' onclick='addRow()'>+Row</button>
</div>
</div>
<div id='foot'>
<div id='total'>
Total: <input type='text' disabled>
</div>
<div id='buttons'>
<button>Submit</button>
<button onclick='resetForm()'>Reset</button>
</div>
</div>
</form>
</div>
</body>
</html>

If buttons are put inside a form, they become submit buttons by default, meaning they submit the form when clicked. If the form doesn't have an action specified, it will be submitted to the same URL as the page, which results in the page being refreshed. This is what happens in your case.
To prevent a button from submitting the form, set its type to be a generic button instead of a submit button:
<button type="button"></button>

Highlight Table Row using onMouseOver and onMouseOut with external JavaScript file

I need to highlight a table row (exluding the table head), but I can not use CSS hover. I must use JavaScript onMouseOver and onMouseOut events. The JavaScript must be contained in an external file.
I am already using the external JavaScript file to print the date in the footer. For some reason onMouseOver and onMouseOut are not calling "trackTableHighlight" or "highlightTableRow". What am I doing wrong?
Here is test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Test</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<div class="main">
<div class="middle-content">
<br>
<table class="stripe_table">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody onMouseOver="trackTableHighlight(event, '#8888FF')" onMouseOut="highlightTableRow(0)">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<footer>
<p>
Today is:
<script>printDate();</script>
</p>
</footer>
</div>
</div>
</body>
</html>
Here is test.js:
function printDate()
{
document.write(Date());
}
function trackTableHighlight(mEvent, highlightColor)
{
if (!mEvent)
mEvent=window.event;
// Internet Explorer
if (mEvent.srcElement)
{
highlightTableRow( mEvent.srcElement, highlightColor);
}
// Netscape and Firefox
else if (mEvent.target)
{
highlightTableRow( mEvent.target, highlightColor);
}
}
function highlightTableRow(myElement, highlightColor)
{
var i=0;
// Restore color of the previously highlighted row
for (i; i<savedStateCount; i++)
{
restoreBackgroundStyle(savedStates[i]);
}
savedStateCount=0;
while (myElement &&
((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
{
myElement=myElement.parentNode;
}
if (!myElement || (myElement && myElement.id && myElement.id=="header") )
return;
if (myElement)
{
var tableRow=myElement;
if (tableRow)
{
savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
savedStateCount++;
}
var tableCell=findNode(myElement, "TD");
var i=0;
while (tableCell)
{
if (tableCell.tagName=="TD")
{
if (!tableCell.style)
{
tableCell.style={};
}
else
{
savedStates[savedStateCount]=saveBackgroundStyle(tableCell);
savedStateCount++;
}
tableCell.style["backgroundColor"]=highlightColor;
tableCell.style.cursor='default';
i++;
}
tableCell=tableCell.nextSibling;
}
}
}
Here is test.css:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, #FFFFFF, #4F6D93) no-repeat;
color: #666666;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #000033;
color: #FFFFFF;
height: 60px;
text-align: center;
padding-top: 15px;
}
nav {
font-weight: bold;
padding: 20px;
float: left;
width: 160px;
}
nav ul {
list-style-type:none;
margin: 0px;
padding-left: 0px;
font-size: 1.2em;
}
h1 {
font-family: "Times New Roman", Georgia, Serif;
margin-top: 0px;
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
padding: 20px;
}
#wrapper {
margin: auto;
width: 80%;
background-color: #90C7E3;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
position: relative;
}
.middle-content {
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
.main {
background-color: #FFFFFF;
border: 3px solid white;
margin-left: 190px;
padding-left: 30px;
margin-bottom: 5%;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
width: 80%;
text-align: center;
}
table, th, td {
border: 2px solid #90C7E3;
}
th, td {
padding: 15px;
}
th {
background: #000033;
color: white;
}
td:nth-child(2) {
text-align: left;
}

Here is a little test in jsfiddle: https://jsfiddle.net/a2Lxqxqe/2/ (I'm not sure about browser compatibility issues but you can see it working just fine in Chrome):
document.addEventListener("DOMContentLoaded", function(event) {
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#8888FF";
});
tr[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "transparent";
});
}
});
function printDate() {
document.write(Date());
}
Instead of addEventListener you can use attachEvent() if you need support for: IE8 and below and/or Opera 6 and below. Here is a little reference to this: http://www.w3schools.com/jsref/met_document_addeventlistener.asp
I wrapped the code in document.addEventListener("DOMContentLoaded", function(event){ ... }) so the code executes after the DOM is loaded, if not you'll get an error when hovering.

Function for AddRow & Popup not working as expected

I am new to the development field.
There are two problem with this code.
First when I click button for add_Row then a row gets added on screen but it disappears after 1-2 seconds and same thing happens with group_Create() popup.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Inventory Expert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../../Bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/ProductMaster.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/RawMaterialGroup.css"/>
<script src="../../JAVASCRIPT/ProductMaster/ProductMaster.js"></script>
<script src="../../JAVASCRIPT/ProductMaster/RawMaterialGroup.js"></script>
<script src="../../jquery-1.11.2.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
</head>
<body>
<img id="top" src="../../Images/shaddow_line_top.png" alt=""/>
<div class="container">
<h1><a>Product Master</a></h1>
<form id="productmasterForm">
<table class="table" id="productmasterTable">
<tr>
<td class="W45">Product Code <input id="productid" type="text"/></td>
<td class="W45">Product Name <input id="productname" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Basic Raw Material <input id="basicraw" type="text"/></td>
<td class="W45">Group Name <input id="groupname" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" id="groupcreate" onclick="group_Create()">C</button>
<button class="btn btn-info btn-sm" id="groupedit" onclick="group_Edit()">E</button>
</div>
</td>
</tr>
<tr>
<td class="W40">Raw Material <input id="rm1" type="text"/></td>
<td class="W30">Size <input id="s1" type="text"/></td>
<td class="W20">Qty. <input id="q1" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" onclick="maprawNsize()">C</button>
<button class="btn btn-info btn-sm" onclick="maprawNsize_Edit()">E</button>
<button class="btn btn-info btn-sm" id="pma" onclick="add_Row()">A</button>
</div>
</td>
</tr>
<tr>
<td class="W45">VAT Rate <input id="vat" type="text"/></td>
<td class="W45">Unit Of Measure <input id="uom" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Manufacturing Cost <input id="menucost" type="text"/></td>
<td class="W45">Sale Rate <input id="salerate" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Maximum Retail Price <input id="mrp" type="text"/></td>
<td class="W45">Default Discount <input id="defdisc" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Rate List Date <input id="listdate" type="text"/></td>
<td class="W45">Kit Reference <input id="kitref" type="text"/></td>
<td class="W10"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
JavaScript File ProductMaster.js
var rowCount = 1;
var rowPosition = 3;
var id = 2;
function add_Row() {
if (rowCount < 11) {
var table = document.getElementById("productmasterTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Size <input id="s' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W30");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'Qty. <input id="q' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 10 Allowed");
}
}
JavaScript File RawMaterialGroup.js
function group_Create(){
document.getElementById('rawgroup').style.display = "block";
}
function group_Hide(){
document.getElementById('rawgroup').style.display = "none";
}
function group_Edit(){
alert("I Am Clicked");
}
var rowCount = 5;
var rowPosition = 7;
var id = 2;
function add_rawMaterial() {
if (rowCount < 16) {
var table = document.getElementById("groupTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rmgrm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Qty. <input id="rmgq' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W20");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'UOM <input id="rmguom' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 15 Allowed");
}
}
CSS File ProductMaster.css
body{
text-align: center;
overflow: hidden;
}
td{
float: left;
text-align: left
}
#rm1,#rm2,#rm3,#rm4,#rm5,#rm6,#rm7,#rm8,#rm9,#rm10{
width: 250px;
height: 30px
}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10{
width: 250px;
height: 30px;
}
#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10{
width: 100px;
height: 30px;
}
.W45{
width: 45%;
}
.W10{
width: 10%;
}
.W15{
width: 15%;
}
.W20{
width: 20%;
}
.W30{
width: 30%;
}
#productid{
width: 100px;
height: 30px;
}
#productname{
width: 300px;
height: 30px;
}
#basicraw{
width: 259px;
height: 30px;
}
#groupname{
width: 315px;
height: 30px;
}
#productmasterForm{
font-size: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#vat{
width: 80px;
height: 30px;
}
#uom{
width: 80px;
height: 30px;
}
#menucost{
width: 80px;
height: 30px;
}
#salerate{
width: 80px;
height: 30px;
}
#mrp{
width: 80px;
height: 30px;
}
#defdisc{
width: 80px;
height: 30px;
}
#listdate{
width: 120px;
height: 30px;
}
#kitref{
width: 100px;
height: 30px;
}
CSS File RawMaterialGroup.css
h2 {
background-color:#00a2e2;
padding:20px 20px;
margin:-10px -10px;
text-align:center;
border-radius:10px 10px 0 0;
border: 1px solid #313131;
}
#rawgroup{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
bottom: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: hidden;
alignment-adjust: central;
}
div#groupPopup{
position: fixed;
left: 18%;
top: 17%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
img#close_group{
position: absolute;
right: -7px;
top: -7px;
cursor: pointer;
}
#groupForm{
max-width: 900px;
min-width: 900px;
padding: 10px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #fff;
margin:-10px -11px;
text-align:center;
border-radius:10px 10px 10px 10px;
}
.W40{
width: 40%;
}
.W20{
width: 20%;
}
.W10{
width: 10%;
}
#rmgrm1,#rmgrm2,#rmgrm3,#rmgrm4,#rmgrm5,#rmgrm6,#rmgrm7,#rmgrm8,#rmgrm9,#rmgrm10,#rmgrm11,#rmgrm12,#rmgrm13,#rmgrm14,#rmgrm15{
width: 215px;
height: 30px;
}
#rmgq1,#rmgq2,#rmgq3,#rmgq4,#rmgq5,#rmgq6,#rmgq7,#rmgq8,#rmgq9,#rmgq10,#rmgq11,#rmgq12,#rmgq13,#rmgq14,#rmgq15{
width: 80px;
height: 30px;
}
#rmguom1,#rmguom2,#rmguom3,#rmguom4,#rmguom5,#rmguom6,#rmguom7,#rmguom8,#rmguom9,#rmguom10,#rmguom11,#rmguom12,#rmguom13,#rmguom14,#rmguom15{
width: 50px;
height: 30px;
}
#rmggn{
width: 200px;
height: 30px;
}
#rmggi{
width: 100px;
height: 30px;
}

You need to add type="button" since the default action in some browsers is a submit
<button type="button" ....>C</button>
<button type="button" ....>E</button>
Alternatively add ;return false to your onclick events like this:
onclick="add_Row(); return false"
to not submit the page
Better would be to assign the event handlers in an onload event but still you need to preventDefault the button's click event if it is not type="button"

How do I give my cell a value?

I am making a table in html where I have to calculate a price after discount.
I have for the moment 2 rows with 7 header cells and under each header cell I have a cell. I am struggling to add values to my cells. I tried this var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3"; to add the value 3 to my Quantity but the value does not appear on my table. I want to do it this way so I can later apply the convert function to all my Tds.
What am I doing wrong?
/* Format amount */
function ConvertAmount(Amount) {
var cells = document.getElementById('table').getElementsByTagName('td');
cells[1] = "3";
var Zahl = Amount;
Zahl = Math.round(Zahl * Math.pow(10, 2)) / Math.pow(10, 2);
Zahl = Zahl.toFixed(2);
Zahl = Zahl.toString();
var Negativ = false;
if (Zahl.indexOf("-") == 0) {
Negativ = true;
Zahl = Zahl.replace("-", "");
}
var str = Zahl.toString();
str = str.replace(".", ",");
var intVorkommastellen = str.length - (str.length - str.indexOf(","));
var intKTrenner = Math.floor((intVorkommastellen - 1) / 3);
var intZiffern = (intVorkommastellen % 3 == 0) ? 3 : (intVorkommastellen % 3);
strNew = str.substring(0, intZiffern);
strHelp = str.substr(intZiffern, (str.length - intZiffern));
for (var i = 0; i < intKTrenner; i++) {
strNew += "." + strHelp.substring(0, 3);
strHelp = strHelp.substr(intZiffern, (strHelp.length - intZiffern));
}
var szNachkommastellen = str.substring(intVorkommastellen, str.length);
if (szNachkommastellen.length < 3) {
strNew += str.substring(intVorkommastellen, str.length) + '0';
} else {
strNew += str.substring(intVorkommastellen, str.length);
}
var Zahl = strNew;
if (Negativ) {
Zahl = "- " + Zahl;
}
return Zahl;
}
.briefkopf {
margin-top: 5px;
}
.ueberschrift {
font-size: 20pt;
font-weight: bolder;
}
.unterueberschrift {
font-size: 14pt;
}
.dagufarbe {
color: #EC7404;
}
body {
margin: 0;
padding: 0;
font: 12pt"Arial";
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin-left: 50px;
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
page-break-before: always;
page-break-after: always;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="page">
<div class="briefkopf">
<br>
<br>
<br>
<div>
<script type="text/javascript">
</script>
</div>
<div>street</div>
<div>number</div>
<div>country</div>
</div>
<br>
<br>
<div class="ueberschrift">Offer from
<script type="text/javascript">
document.write(Invoicedate)
</script>
</div>
<br>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
border-width: 1px;
border-style: none none solid;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
</style>
<table id="table" class="tg" style="width:900px;">
<tr>
<th align="center" class="tg">Pos</th>
<th id="Quantity" align="center" class="tg">Quantity</th>
<th align="center" class="tg">Type</th>
<th align="left" class="tg">Description</th>
<th align="center" class="tg" style="width:100px;">Unitprice</th>
<th align="center" class="tg" style="width:75px;">Discount</th>
<th align="center" class="tg">Totalprice</th>
</tr>
<tr style="page-break-inside:avoid;">
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{POSITION}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{QUANTITY}}'))
</script>
</center>
</td>
<td align="right" class="tg" valign="top">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{ART}}'))
</script>
</center>
</td>
<td align="left" class="tg">
<div class="dagufarbe">
<center>
<script type="text/javascript">
document.write(ConvertAmount('{{DESCRIPTION}}'))
</script>
</center>
</div>
<br>
<div style="margin-top:-15px;">
<script type="text/javascript">
document.write(ConvertAmount('{{COMMENTARY}}'))
</script>
</div>
</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{UNITPRICE}}'))
</script>€</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{DISCOUNT}}'))
</script>%</td>
<td align="right" class="tg" valign="top">
<script type="text/javascript">
document.write(ConvertAmount('{{POSITIONSPRICE}}'))
</script>€</td>
</tr>
</table>
<style type="text/css">
.ta {
font-family: Arial, sans-serif;
font-size: 12pt;
padding: 10px 5px;
overflow: hidden;
word-break: normal;
}
.tb {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-width: 3px;
border-style: none none solid;
}
.te {
font-family: Arial, sans-serif;
font-size: 12pt;
font-weight: normal;
padding: 10px 5px;
border-style: none none solid;
}
</style>
<table style="width:575px; margin-left:330px;">
<tr>
<td class="ta">Total nett
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTNETT}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="te">
<div style="margin-top:-25px;">plus VAT 19,00 %</div>
<div style="margin-left:500px; margin-top:-20px;">
<script type="text/javascript">
document.write(ConvertAmount('{{AMOUNTTAX}}'))
</script>€</div>
<br>
</td>
</tr>
<tr>
<td class="tb"><b>Total amount <div style="margin-left:500px; margin-top:-20px;"><script type="text/javascript">document.write(ConvertAmount('{{AMOUNTGROSS}}'))</script> €</div></b>
</td>
</tr>
</table>
<br>
</div>
<br>
</p>

Table with input text created by jquery how to save in mysql database

Please help me how to save in mysql database an inputted data in my dynamic table.
This is the html file.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Dynamic Table</title>
<link href="dynamictable_css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Data Table</h1>
<table id="data" class="data-table data-table-horizontal data-table-highlight">
<tbody>
<tr>
<td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>
</tr>
</table>
<div class="pull-right">
<input type="button" value="Add" class="top-buffer" onclick="addRow('data')" />
</div>
</div>
<script src="dynamictable_js/index.js"></script>
</body>
</html>
This is javascript.
index.js:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row) {
var table = document.getElementById("data");
var rowCount = table.rows.length;
if (rowCount > 1) {
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}
else {
alert("Please specify at least one value.");
}
}
This is the css.
style.css:
h1 {
font-family: Arial;
font-size: 20px;
color: #666;
}
.data-table {
border: solid 1px #eee;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
width: 100%;
}
.data-table tbody td {
border: solid 1px #eee;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.data-table-highlight tbody tr:hover {
background-color: #f8f8f8;
}
.data-table-horizontal tbody td {
border-left: none;
border-right: none;
}
.top-buffer {
margin-top: 20px;
}
.pull-right {
float: right;
}
#main {
width: 60%;
margin: 5%;
}
I have a thesis from Bulacan State University in philippines.
I am 4th year IT student want to pass my thesis.
Sorry for my bad english..

Develop Reference

JavaScript is the programming language of the Web.

add auto-increment or timestamp - javascript, jstorage - javascript

JavaScript: function uniqid() { var newDate = new Date; return newDate.getTime(); }

Related

HTML Form resets my Javascript variable [duplicate]

Highlight Table Row using onMouseOver and onMouseOut with external JavaScript file

Function for AddRow & Popup not working as expected

How do I give my cell a value?

Table with input text created by jquery how to save in mysql database

Categories

Resources