JSFiddle - React, Tailwind, and code Playground

by ced1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="750" border="0" cellpadding="0" cellspacing="0">
                   <tr><td colspan="3"  bgcolor="#333" class="st">Size Chart</td></tr>
                    <tr>

                    <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
                    <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
                    <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
                    </tr>
                    <tr class="row-edit">
                    <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
                    <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
                    <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
                    </tr> 
                    <tr class="row-add" style="display:none">
                    <td height="20" bgcolor="#FEFDF8" class="add">20</td>
                    <td height="20" bgcolor="#FEFDF8" class="add">28</td>
                    <td height="20" bgcolor="#FEFDF8" class="add">32</td>
                    </tr> 
</table>

JavaScript

$( ".sd" ).dblclick(function() {$(".row-add").show();});