Does anyone know the best way to implement this code snippet for user input and output tables using JavaScript? Take a look here
This is what I have tried so far:
/*index.html*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body onload="createTable()">
<div class='box'>
<h4>New Contact</h4>
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name<span class="required">*</span></label>
<input type="text" class="form-control" id="formGroupExampleInput">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Phone<span class="required">*</span></label>
<input type="text" class="form-control" id="formGroupExampleInput2">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div>
<p>
<input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
</p>
<div id="cont"></div> <!--the container to add the table.-->
<p><input type="button" id="bt" value="Submit Data" onclick="submit()" /></p>
</div>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
/*style.css*/
body {
background-color: lightsteelblue;
}
h4{
text-align: center;
}
.required {
color: red;
}
.box {
width: 300px;
border: 15px solid white;
border-radius: 25px;
padding: 50px;
margin: 20px;
background-color:white;
}
I'm struggling with creating the right side table that should only appear when all data is entered on the left side. Once 'Add' is clicked, the row should be added to the right side table with an auto-numbered ID column. Additionally, there should be an 'Action' button on each row to delete it.
I would really appreciate any help as my knowledge of JavaScript is limited.