How to split one row into multiple row in html

Question

I need to split one table row into multiple row when calling a js function

This is the table:

<table id="tab_calc">
  <tr class="tr_calc">
    <td>Sub Total</td>
    <td>Tax</td>
    <td>Freight</td>
    <td>Insurance</td>
    <td>Discount</td>
    <td>Total</td>  
    <td>Amt Paid</td>     
    <td>Bal Due</td>        
</tr>

I want to make it look like this after I call a function:

<table id="tab_calc">
 <tr>
    <td>Sub Total</td>
 </tr>
 <tr>
    <td>Tax</td>
 </tr>
 <tr>
    <td>Freight</td>
    <td>Insurance</td>
    <td>Discount</td>
 </tr>
 <tr>
    <td>Total</td>
 </tr>
 <tr>  
    <td>Amt Paid</td>
 </tr>
 <tr>     
    <td>Bal Due</td>        
 </tr>
 </table>

Answer 1

Try below code:

fiddler

$(document).ready(function(){
   $('.tr_calc').replaceWith( $('.tr_calc').html()
   .replace(/<td>/gi, "<tr> <td>")
   .replace(/<\/td>/gi, "</td></tr>")
    );
});