Read also: How to Create a Simple Table View Using HTML CSS
Because this review is a continuation of several previous articles, for those of you who don’t have the whole code, you can collect the code in the previous post. The first thing we’re going to do is assign an action button to the user data view table with the column name action . here’s the code:
User Data
| No | Username | Full name | Address | Religion | Gender | Action |
|---|---|---|---|---|---|---|
| 1 | Violet | Violet Evergarden | Jl fatmawati no 5 | Christian | Woman | |
| 2 | AF | Alucard de franco | Jl Mawar no 10 | catholic | Man | |
| 3 | Miya | Miya | Jl goodness no 7 | Islam | Woman | |
| 4 | Sun | Sun MK | Jl. Silk no. 1 | Buddha | Man | |
| 5 | YSS | Yisun sin | Jl seven five no 9 | Hindu | Man | |
in the code above we only need to add the action column and the button code to display the edit button which we will display in the action column. Next we need the code for the edit user form which we will display as a popup. Here’s the code:
Data Input Form
next is to add js code. Here’s the code:
var btn = document.getElementById(“form-user”);
var span = document.getElementsByClassName(“close”)[0];
btn.onclick = function() {
userform.style.display = “block”;
}
span.onclick = function() {
userform.style.display = “none”;
}
window.onclick = function(event) {
if (event.target == user) {
userform.style.display = “none”;
}
}
This js code plays an important role for the continuity of the normal user edit form display, in the edit user form display code, there are id = userform and class = edit-form-user. in this js code id and class are used to identify (key to get the edit user form code element),
.edit-content {
margin-left: 0px;
border-left: 0px solid gray;
overflow: hidden;
}
.edit-content form {
margin-left: 0px;
padding: 20px;
}.
userform {
position: fixed;
display: none;
z-index: 1;
padding-top: 100px;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: auto;
background-color: #000;
background-color: rgba(0,0,0,0.4);
}
.user-content {
background-color: #fefefe;
margins: auto;
padding: 0px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
colors: #000;
text-decoration: none;
cursors: pointers;
}
.user-headers {
padding: 5px;
background-color: #cdccfe;
color: white;
text-align: center;
}
.user-headers h2 {
margins: 0px;
padding: 10px;
}
Add the above css code to the style.css file:
There is an additional column display, namely the action column which contains the edit data button, if we click the button, the edit data form will appear.
That’s my review on how to make a popup edit form with html css js. Hopefully it can be useful, thank you
