Develop Reference

Trying to figure out how to delete rows in table with delete all the rows in the localstorage

So, I was trying to figure out how to delete a row in a table without deleting all the rows located in the local storage.
Here is my JS code, a table that collects data from a form.
var arr = new Array();
//Add data to memory
function addData() {
getData();
arr.push({
contentId: document.getElementById("contentId").value,
channel: document.getElementById("channel").value,
follows: document.getElementById("follows").value,
unfollows: document.getElementById("unfollows").value,
likes: document.getElementById("likes").value,
shares: document.getElementById("shares").value,
views: document.getElementById("views").value,
reaches: document.getElementById("reaches").value,
postDate: document.getElementById("postDate").value
});
localStorage.setItem("localData", JSON.stringify(arr));
showData();
}
function getData() {
var str = localStorage.getItem("localData");
if (str != null)
arr = JSON.parse(str);
}
function deleteData() {
localStorage.clear()
}
function showData() {
getData();
var tbl = document.getElementById("myTable");
var x = tbl.rows.length;
while (--x) {
tbl.deleteRow(x);
}
for (i = 0; i < arr.length; i++) {
var r = tbl.insertRow();
var cell1 = r.insertCell();
var cell2 = r.insertCell();
var cell3 = r.insertCell();
var cell4 = r.insertCell();
var cell5 = r.insertCell();
var cell6 = r.insertCell();
var cell7 = r.insertCell();
var cell8 = r.insertCell();
var cell9 = r.insertCell();
cell1.innerHTML = arr[i].contentId;
cell2.innerHTML = arr[i].channel;
cell3.innerHTML = arr[i].follows;
cell4.innerHTML = arr[i].unfollows;
cell5.innerHTML = arr[i].likes;
cell6.innerHTML = arr[i].shares;
cell7.innerHTML = arr[i].views;
cell8.innerHTML = arr[i].reaches;
cell9.innerHTML = arr[i].postDate;
}
}
Therefore, could anyone give me a little insight into the best solution to deleting the rows in the table by using Js.
Suppose you may need my HTML code.
<div class="formData">
<form onsubmit="addData(); return false;">
<label for="contentId">Enter ContentID:</label>
<input type="text" id="contentId" placeholder="ContentID" /></br>
<label for="follows">Enter in the social site:</label>
<input type="text" id="channel" placeholder="channel" /></br>
<label for="channel">Enter # of new followers:</label>
<input type="number" id="follows" placeholder="followers" /></br>
<label for="unfollows">Enter the # of unfollowers:</label>
<input type="number" id="unfollows" placeholder="Unfollowers" /></br>
<label for="likes">Enter the # of likes:</label>
<input type="number" id="likes" placeholder="Likes" /></br>
<label for="shares">Enter the # of shares:</label>
<input type="text" id="shares" placeholder="Shares" /></br>
<label for="views">Enter the # of views:</label>
<input type="text" id="views" placeholder="Views" /></br>
<label for="reaches">Enter the # of reaches:</label>
<input type="text" id="reaches" placeholder="reaches" /></br>
<label for="reaches">Date Posted:</label>
<input type="date" id="postDate" placeholder="date" /></br>
<br>
<input type="submit" value="Add data" />
<input type="reset" value="clear" />
<input type="button" value="delete" onclick="deleteData();" />
</form>
</div>
<h3>Monthly Social Media Data</h3>
<table id="myTable" border=1>
<tr>
<th>
Content ID
</th>
<th>
Channel
</th>
<th>
Followers
</th>
<th>
Unfollowers
</th>
<th>
Likes
</th>
<th>
views
</th>
<th>
Shares
</th>
<th>
Reaches
</th>
<th>
Date Posted
</th>
</tr>
</table>
<script>
showData();
</script>

object HTMLInputElement appears instead of checkbox

I'm trying to have a checkbox appear in the Collected column after pressing the Add Item button however, [object HTMLInputElement] appears instead. I've tried appendChild, insertBefore and removing innerHTML but obviously that's made things worse. I've tried searching on Google and Stackoverflow for similar questions for relevant answers but no one's had a similar situation to me.
function addItem() {
var a = String(document.getElementById("it").value);
var b = parseFloat(document.getElementById("iq").value);
if (a.length === 0 || isNaN(b)) {
window.alert("Required field empty, please enter values in both boxes.");
} else {
var table = document.getElementById("list");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cb = document.createElement("INPUT");
cb.setAttribute("type", "checkbox");
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.innerHTML = cb;
}
}
<table id="list" align="center">
<tr>
<td colspan="3">
<input id="it" name="item" type="text" placeholder="Item" />
<input id="iq" name="quantity" type="text" placeholder="No." />
<br />
<input value="Add Item" type="submit" onclick="addItem()" />
<hr />
</td>
</tr>
<tr>
<td><span>Item</span></td>
<td><span>Quantity</span></td>
<td><span>Collected</span></td>
</tr>
</table>

You need to use appendChild and not overwrite the innerHTML of the cell. You are adding a new element to the DOM. This can be done by writing the HTML into the cell, but you have created the element so just append it..
function addItem() {
var a = String(document.getElementById("it").value);
var b = parseFloat(document.getElementById("iq").value);
if (a.length === 0 || isNaN(b)) {
window.alert("Required field empty, please enter values in both boxes.");
} else {
var table = document.getElementById("list");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cb = document.createElement("INPUT");
cb.setAttribute("type", "checkbox");
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.appendChild(cb);
}
}
<table id="list" align="center">
<tr>
<td colspan="3">
<input id="it" name="item" type="text" placeholder="Item" />
<input id="iq" name="quantity" type="text" placeholder="No." />
<br />
<input value="Add Item" type="submit" onclick="addItem()" />
<hr />
</td>
</tr>
<tr>
<td><span>Item</span></td>
<td><span>Quantity</span></td>
<td><span>Collected</span></td>
</tr>
</table>

Store all data to 2D array

I'm trying to save login credentials to HTML table (be patient please, I'm not a professional). I'm using push method to store the data but eventually, it stores only data of the last iteration because it was built around click function. So my question is how I store all credentials and not only the last one
<body>
<form name="login" class="diss">
Username<input type="text" name="userid" id="userName" />
Password<input type="password" name="pswrd" id="passw"/>
<input type="button" class="btn-dis" value="Login"/>
</form>
<table id="showAfter">
<tr>
<th>User Name</th>
<th>Password</th>
</tr>
</table>
<script src="firstMission.js"></script>
</body>
document.querySelector('.btn-dis').addEventListener('click', function()
x = document.getElementById("userName").value;
y = document.getElementById("passw").value;
table=document.getElementById('showAfter');
if (x=='' || y ==''){
alert("no can do");
restart();
}
else{
myTestArr.push([x,y]);
for(var i=0;i<myTestArr.length;i++)
{
var newRow = table.insertRow(table.length);
for(var j=0;j<myTestArr[i].length;j++)
{
var cell = newRow.insertCell(j);
cell.innerHTML=myTestArr[i][j];
}
}
}
mySecArr[i] = JSON.parse(JSON.stringify(myTestArr[i])); //copying to another
array
myTestArr.pop();
});

I'm not totally sure what you are going for here. But, given what I think you want, the following implementation will allow you to add new usernames and passwords to a table, while simultaneously storing them into an array.
const credentials = [];
document.querySelector('.btn-dis').addEventListener('click', function(e) {
let user = document.querySelector("#userName").value,
pass = document.querySelector("#passw").value,
table = document.querySelector("#showAfter");
if (!user && !pass) {
alert("no can do")
} else {
credentials.push([user, pass]);
var newRow = table.insertRow(table.length);
var cell = newRow.insertCell(0);
cell.innerHTML = user;
cell = newRow.insertCell(1);
cell.innerHTML = pass;
}
})
<body>
<form name="login" class="diss">
Username<input type="text" name="userid" id="userName" /> Password
<input type="password" name="pswrd" id="passw" />
<input type="button" class="btn-dis" value="Login" />
</form>
<table id="showAfter">
<tr>
<th>User Name</th>
<th>Password</th>
</tr>
</table>
</body>
That being said, saving credentials to memory is generally a bad practice, one which i would not recommend doing. But given you are a beginner, i'm going to make the assumption that this is for learning purposes only.

Cloning with javascript - renaming ID of form elements within a table

I have some code I am using that works well cloning the contents of a div as many times as needed.
The original code would rename the name/id of each form field. so the first clone the name would be "name1" second clone "name2" etc...
The problem is when I put the form fields within a div or a table for design purposes.
The code doesn't rename the form fields anymore as it seems to refer to the top elment which is the table or div (depending which I used)
Here is a cut down version of the code that contains everything needed for this example (can be copied into an editor and will work as is. You will see the field id's are not being renamed):
www.jsbin.com/oyavez/1/edit
<script type="text/javascript">
var formCounter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
formCounter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + formCounter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
</script>
<title>Add Orders IO TOC</title>
</head>
<body>
<!-- Template -->
<div id="readroot" style="display: none">
<table>
<tr><td colspan="2"><h3>Order <script>document.write(formCounter);</script></h2></td></tr>
<tr><td>Order ID: </td><td><input type="text" id="OrderID name="OrderID[]" ></input></td>
<td>Order Name: </td><td><input type="text" id="OrderName" name="OrderName[]" ></input></td>
</table>
<br /><br /><input type="button" value="Remove Above Order" style="width:200px;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<!-- ROW -->
</div>
<!-- END Template -->
<!-- Start of form -->
<form method="get" action="form.php">
<table>
<tr><td align="center" colspan="2"><h2>Contract</h2></td></tr>
<!-- Static part of the form not to be cloned -->
<tr><td>Contract: </td><td><input type="text" id="Contract" name="Contract" ></input></td>
<td>Signed Date: </td><td><input type="text" id="datepicker0" name="SignedDate" ></input></td>
<tr><td align="center" colspan="2"><h2>Orders</h2></td></tr>
</table>
<!-- ROW -->
<!-- Cloned parts of the form appear here -->
<span id="writeroot"></span>
<table>
<tr><td align="center" > <input type="button" style="width:200px;" value="Add another order below" onclick="moreFields()" /></td>
<td align="center" ><input type="submit" value="Submit IO and all Orders" style="width:200px;" ></td></tr>
</table>
</form>
Anyone know how to get to the child of the table it would seem?
Thanks!

retrieving multiple cookie values in a single cookie in javascript

I had post this problem before, dealing with the shopping cart application. The application so far does everything that i would like it to do. I'm able to store and retrieve the cookies. But right now, my problem is extracting the individual values from the cookies and placing them into a table i have created. This is the format of the cookie when retrieved.
ItemName = quantity$price. what i am trying to do is retrieve the quantity and price values from the cookie, and display that data into my table. the cookie is being created in my store page, and then retrieved and displayed in my cart page. here is the code for my store page
store.html
<html>
<head>
<title> Store </title>
<h1> My store </h1>
<script type="text/javascript">
function retr(circle)
{
var cke = document.cookie.split(';');
var nameCk= name + "=";
for(var i=0; i < cke.length; i++)
{
var c = cke [i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameCk) == 0)
return c.substring(nameCk.length, c.length);
}
return null;
}
function createCookie()
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
if (document.getElementById("circle").checked)
{
document.cookie = "Circle=" + document.getElementById("quantity1").value + document.getElementById("price1").value + ";expires="+exdate.toGMTString();
}
}
function retrieve()
{
if (document.getElementById("circle").checked)
{
document.getElementById("ret").value = document.cookie;
}
}
function Calc()
{
var fpri = document.getElementById("price1").value;
var pri = fpri.substr(1);
var qty = document.getElementById("quantity1").value;
var spri = document.getElementById("price2").value;
var pri2 = spri.substr(1);
var qty2 = document.getElementById("quantity2").value;
if (document.getElementById("circle").checked)
{
document.getElementById("total").value ='$' + Number(pri) *
Number(qty);
}
else
document.getElementById("total").value = '$' + Number(pri2) *
Number(qty2);
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td> <input type="checkbox" id="circle" /> Circle </td>
<td> <img src="circle.jpg"> </img> </td>
<td> Price: <input type="text" size="4" value = "$10.00"
id="price1" name = "price1" /></td>
<td> Quantity: <input type="text" size = "4"
id="quantity1"/></td>
</tr>
<tr>
<td> <input type = "checkbox" id="stickman" /> Stickman </td>
<td> <img src = "stickman.gif"> </img> </td>
<td> Price: <input type="text" size="4" value = "$5.00"
id="price2" /> </td>
<td> Quantity: <input type="text" size="4" id="quantity2" />
</td>
</tr>
</table>
<br />
<input type = "button" value = "Add to cart"
onclick="createCookie()">
<br />
<br />
<a href ="cart.html" > View Cart </a>
<br />
<input type = "text" size = "8" id = "total" readonly = "readonly"
/> Total
<br />
<input type = "button" id = "calcu" value = "calc" onclick = "Calc
()" />
<input type = "button" value = "retrieve" onclick = "retrieve()" />
<input type = "text" readonly = "readonly" name = "ret" id =
"ret"/>
</body>
</html>
the calculate and retrieve buttons, and the readonly text boxes are there just so i know the cookie is being stored and retrieved, and that i'm able to get the total, which will be displayed on my cart page.
here is the code for my cart page
cart.html
<html>
<head>
<title> Cart </title>
<h1> My cart </h1>
<script type = "text/javascript">
function retr(circle)
{
document.getElementById("q2").value = document.getElementById("quantity1").value
}
function retrieve()
{
var quvalue = retr("circle")
if (quvalue != false) {
document.getElementById("q2").value = quvalue
}
document.getElementById("ret").value = document.cookie;
}
</script>
</head>
<body onload = "retrieve()">
<table border = "1">
<td>Stickman </td>
<td><input type = "text" size = "8" id = "q2" readonly = "readonly" /></td>
<td id ="p1"> price per </td>
<td id ="t1"> total </td>
<tr> </tr>
<td> Circle </td>
<td> quantity order </td>
<td> price per </td>
<td> total </td>
<tr> </tr>
<td colspan = "3"> TOTAL: </td>
<td> total price </td>
</table>
<br /> <br />
<input type ="text" id = "ret" readonly = "readonly" />
<br / > <br />
<input type = "button" value = "Checkout">
<br /> <br />
<a href = "store.html" > Continue Shopping </a>
</body>
</html>
the values that are supposed to be retrieved in the table are invoked using the onload event attribute which is suppose to call the retrieve() function.
also, i understand that the way i created the table in my carts page isn't completely correct. but my main focus right now is to get the necessary values to be displayed in my table, then i will go back in rewrite my table code.