如何在html中将一行拆分为多行

Question

我需要在调用js函数时将一个表行拆分成多行

这是表格：

<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>

我想在调用函数后让它看起来像这样：

<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

请尝试以下代码：

fiddler

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