<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to Input Table</title>
<style>
#inform {
background-color:#F2FFFF;
width:500px;
}
#intable {
border-collapse: collapse; /* Collapse table border */
width:400px;
}
#intable td {
padding: 5px;
border:1px #888 solid;
}
.intext {
width:97%;
}
</style>
<script>
// Array.isArray(value) // not empty array will result true
j = {"Login":"gk10","Password":"123"};
function display()
{
str = `<br><table id="intable">`;
for (k in j) {
str += `<tr><td>`+k+`:</td><td><input class="intext" type="text" id="`+k+`" value="`+j[k]+`"></td></tr>`;
}
str += "</table><br>";
str += `<input id="textOut" type="hidden">`;
str += `<input type="button" value="Save" onclick="saveToJSON()">`;
document.getElementById("maintable").innerHTML = str;
}
// Convert to JSON and submit a form
// Only existing keys
function saveToJSON()
{
for (k in j) {
j[k] = document.getElementById(k).value; // get the info from the inputs
}
console.log(j);
// document.getElementById("textOut").value = JSON.stringify(j);
// inform.submit();
// localStorage["gkjson"] = JSON.stringify(j);
}
function newField()
{
var k = prompt("Field name: ",""); // Get key
var v = prompt("Field content: ",""); // Get value
j[k] = v; // Add to JSON
display(); // Display
}
</script>
</head>
<body>
<div align="center">
<h1>JSON to Table using input and form</h1>
<form id="inform" name="inform" method="post" action="json_to_table_save.php">
<div id="maintable"></div>
</form>
<br>
<input type="button" value="New Field" onclick="newField()">
</div>
<script>
display();
</script>
</body>
</html>