For around two weeks now I’ve been trying to get this simple add table row thing to work but i can’t seem to find any good tutorials on youtube related to what I’m asking for & most of the things I found here on stack overflow rely on jquery which i something i want to avoid using. Basically what I want my function to do is to take what the user entered in the form and put that into the cells of the new table row, then, I want to save this data to a JSON file that can then be parsed so that this data isn’t lost upon refresh.
Can someone please help me make this work
I am using an app-building software called electron however, I doubt that would have much effect on my code.
I’ve tried some basic code i found on youtube but those did absolutely nothing & anything else i could find was using jquery.
I then just looked up tutorials on google/stack overflow and incorporated the little relevant information into my addTableRow(); function but this doesnt work as I would expect – it adds a new table row with cells but the row almost immediately disappears & the cells, instead of showing what i put into the form, the only showed [objectHTMLInputElement]
My current java script code (renderer.js):
const addTableRow = () => {
const name = document.getElementById("name");
const pnum = document.getElementById("pnum");
const age = document.getElementById("age");
let table = document.getElementById("clientTable");
let row = table.insertRow(-1);
let c1 = row.insertCell(0);
let c2 = row.insertCell(1);
let c3 = row.insertCell(2);
c1.innerHTML = `${name}`;
c2.innerHTML = `${pnum}`;
c3.innerHTML = `${age}`;
table.appendChild(row);
const clientTable = {
row: {
c1: c1,
c2: c2,
c3: c3
}
}
fs.appendFile('table-data.json', JSON.stringify(clientTable));
}
-=-=-=-=-=-=-=-
The associated html (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet">
<title>Ezek's jsapp</title>
</head>
<body>
<div class="tabs-container">
<div class="tabs">
<div class="tab active">Clients</div>
<div class="tab">Files</div>
<div class="tab">Settings</div>
</div>
<div class="content-container">
<div class="content active">
<h3>Clients</h3>
<p>This is the clients tab</p>
<form id="clForm">
<label for="name">Name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pnum">Phone Number</label><br>
<input type="text" id="pnum" name="pnum"><br>
<label for="age">Age</label><br>
<input type="text" id="age" name="age"><br>
<button id="clBtn" onclick="addTableRow();">Submit</button>
</form>
<section class="wrapper-main">
<table id="clientTable">
<thead>
<tr>
<th>Name</th>
<th>PhoneNumber</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>ClientName</td>
<td>PhoneNumber</td>
<td>ClientAge</td>
</tr>
<tr>
<td>ClientName</td>
<td>PhoneNumber</td>
<td>ClientAge</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="content">
<h3>Files</h3>
<p>This is the files tab, upload files here!</p>
</div>
<div class="content">
<h3>Settings</h3>
<p>This is the settings tab</p>
</div>
</div>
</divnp>
<script src="renderer.js"></script>
</body>
</html>