JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<form action="">
<table>
    <tbody>
        <tr>
            <td colspan="3"><b>table 1</b></td>
        </tr>    
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">2</td>
            <td class="edit">
                <select>
                    <option value="1">1</option>   
                    <option value="2" selected="selected">2</option>    
                    <option value="3">3</option>    
                </select>    
            </td>
        </tr>
    </tbody>
</table>  
<br/>
<input type="button" value="Wijzigen" class="viewbutton"> 
<input type="submit" value="Versturen" class="editbutton"> 
<input type="reset" value="Annuleer" class="cancelbutton"> 
</form>
    
<hr/>
    
<form action="">
<table>
    <tbody>
        <tr>
            <td colspan="3"><b>table 2</b></td>
        </tr>    
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">text uneditable</td>
            <td class="edit"><input value="text editable"/></td>
        </tr>
        <tr>
            <td>some text:</td>
            <td class="view">2</td>
            <td class="edit">
 ...

CSS

table tr{
    border:1px solid black;
}

table td{
    padding:3px;
}

table .view{border-left:1px solid black; width:160px;}
table .edit{border-left:1px solid black; width:160px;}
table input {border:1px solid black;}

table .view, .viewbutton{display:inline-block;}
table .edit, .editbutton, .cancelbutton{display:none;}

input {border:1px solid black;}

JavaScript

$(".viewbutton").click(function(event){
    $(this).closest('form').find('.view, .viewbutton').hide().closest('form').find('.edit, .editbutton, ,.cancelbutton').fadeIn('slow');
});

$(".cancelbutton").click(function(event){
    $(this).closest('form').find('.edit, .editbutton, .cancelbutton').hide().closest('form').find('.view, .viewbutton').fadeIn('slow');
});