JSFiddle - React, Tailwind, and code Playground
by KlaytonJames
HTML
<div class="panel">
<div class="content">
<!-- users details -->
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th colspan="2">Mobile</th>
</tr>
<tr>
<form>
<td>1</td>
<td><input type="text" value="TestUser1" required></td>
<td><input type="email" value="[email protected]" required></td>
<td><input type="tel" value="01234567" required></td>
<td>
<button type="button" class="edit">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 2.8923135 2.8889544"
height="2.8889544mm"
width="2.8923135mm">
<defs id="defs2" />
<metadata id="metadata5">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-155.79194,-151.16862)"
id="layer1">
<path
style="fill-opacity:1;stroke-width:1"
d="m 155.79225,154.05316 c 0,-0.0116 0.1084,-0.72009 0.1107,-0.72219 0,-0.001 0.142,0.13769 0.313,0.30864 0.1711,0.17094 0.3092,0.31081 0.307,0.31081 -0.01,0 -0.1649,0.0244 -0.3615,0.0543 -0.3941,0.0598 -0.3692,0.0565 -0.3692,0.0485 z m 0.4994,-0.49705 -0.3149,-0.31473 0.8777,-0.87709 0.8777,-0.8771...SCSS
* {
box-sizing: border-box;
position: relative;
transition: all 0.3s linear;
}
.panel {
padding: 20px;
background: pink;
table {
border: 0;
width: 100%;
th, td {
border: 0;
padding: 10px;
color: #000;
font-size: 14px;
text-align: left;
}
th {
background: lightblue;
font-weight: 400;
}
td {
border-bottom: 1px solid #aaa;
}
input {
background: none;
padding: 0;
border-radius: 0;
border: 1px solid transparent;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
color: #000;
width: 100%;
pointer-events: none;
&.error {
border-color: red;
}
}
button {
background: none;
padding: 0;
border: 0;
border-radius: 0;
transition: none;
svg {
fill: blue;
width: 20px;
height: 20px;
}
&.save {
display: none;
}
}
.editable {
input {
background: #fff;
padding: 3px;
border-radius: 2px;
pointer-events: all;
}
button {
&.edit {
display: none;
}
&.save {
display: block;
}
}
}
}
&.rotate {
transform: rotateX(180deg);
.content {
transform: rotateX(-180deg);
}
}
}
.alertbox {
position: fixed;
bottom: 15px;
left: 15px;
right: 15px;
border: 3px solid green;
padding: 20px;
background: #ccc;
opacity: 0;
p {
color: green;
...JavaScript
$(document).ready(function() {
$("button.edit").on("click", function() {
$(this).parents(".panel").addClass("rotate");
$(this).parents("tr").addClass("editable");
})
$("button.save").on("click", function() {
$("table input").each(function() {
var ret = true;
if ($(this).val() == '') {
$(this).addClass("error");
ret = false;
return false;
}
else {
$(this).removeClass("error").parents(".panel").removeClass("rotate");
$("table tr").removeClass("editable");
$(".alertbox").addClass("show");
}
return ret;
});
})
})