動態生成父table，子table 嵌套生成。

<table id="orderTable"  border='1' width="80%" >
   <thead>
<tr>
<td>序號</td>
<td>服務質量</td>
<td>完成狀態</td>
<td><input type="button" name="insert"  value="+" style="width:80px" onclick="insertBigRow()" /></td>
</tr>
   </thead>
 
 <tr class="addBigTemp_tr">
 <td colspan="4">
 
 <table width="100%" >
 
 <tr >
<td>1</td>
<td>
 <select id="Select2" name="UrbanDepNo" style="width:90%">
 
  <option value="1">醫療服務質量反饋</option>
   <option value="1">護理服務質量反饋</option>
    <option value="1">後勤保障相關問題反饋</option>

 </select></td>
  <td>
<select id="Select1" name="UrbanDepNo" style="width:90%">
<option value="1">待完成 </option>
<option value="1">整改中</option>
<option value="1">已完成</option>
<option value="1">條件不符</option>
</select>
 </td>
 <td><input type="button" name="insert"  value="刪除" style="width:80px" onclick="deleteBigRow(this,'orderTable',0)" /></td>
</tr>

<tr>
<td colspan="4">
<table id="orderSmallTable0"  border='0' width="100%" >
<tr>
<td>序號</td>
<td>類型</td>
<td>問題</td>
<td><input type="button" name="insert"  value="+" style="width:80px" onclick="insertSmallRow(0)" /></td>
</tr>
<tr class="addSmallTemp_tr0">
<td valign="top">1</td>
<td valign="top">
<select id="Select3" name="UrbanDepNo" style="width:90%">
<option value="1">待完成 </option>
<option value="1">整改中</option>
<option value="1">已完成</option>
<option value="1">條件不符</option>
</select>
</td>
<td>
 <textarea id="ZsWjOfficeAn"  name="ZsWjOfficeAn" cols="20" rows="2" style="width:100%; height:50px"></textarea>
 
 
</td>
<td valign="top"><input type="button" name="insert"  value="-" style="width:80px" onclick="deleteSmallRow(this,'orderSmallTable0')" /></td>
</tr>


</table>
</td>
</tr>
 </table>
 
 
 </td>
 
 </tr>
 
 
</table>







<script>
 //聲明全局變量
 var PersonNum=0;
 var formvalue = "";
 var flag = 1;
 var index = 1;
 var firstCell = "";
 var secondCell = "";
 var thirdCell = "";
 var fourthCell = "";
 
 var firstConCell = "";
 var flagSmall = 1;
 
 $(function() {
     //初始化第一行
     firstCell = $("#rowHead0 td:eq(0)").html();
     secondCell = $("#rowHead0 td:eq(1)").html();
     thirdCell = $("#rowHead0 td:eq(2)").html();
     fourthCell = $("#rowHead0 td:eq(3)").html();
     
     firstConCell = $("#rowCon0 td:eq(0)").html();
 });
 
 String.prototype.replaceAll  = function(s1,s2){     
                return this.replace(new RegExp(s1,"gm"),s2);     
            }  
            
            
  var TEMPLATE = {
    BigTemple: function() {
      /**
     <tr class="addBigTemp_tr">
 <td colspan="4">
 
 <table width="100%" >
   

<tr>
<td>{$BigNum$}</td>
<td>
 <select id="Select2" name="UrbanDepNo" style="width:90%">
 
  <option value="1">醫療服務質量反饋</option>
   <option value="1">護理服務質量反饋</option>
    <option value="1">後勤保障相關問題反饋</option>

 </select></td>
  <td>
<select id="Select1" name="UrbanDepNo" style="width:90%">
<option value="1">待完成 </option>
<option value="1">整改中</option>
<option value="1">已完成</option>
<option value="1">條件不符</option>
</select>
 </td>
 <td><input type="button" name="insert"  value="刪除" style="width:80px" onclick="deleteBigRow(this,'orderTable',{$Page$})" /></td>
</tr>
   {$SmallTableTemple$} 
     </table>
 
 
 </td>
 
 </tr>
 
     
     */
    },
    SmallTableTemple: function() {
            /**
<tr class="addBigNextTemp_tr">
<td colspan="4">
<table id="orderSmallTable{$Page$}"  border='0' width="100%" >
<tr>
<td>序號</td>
<td>類型</td>
<td>問題</td>
<td><input type="button" name="insert"  value="+" style="width:80px" onclick="insertSmallRow({$Page$})" /></td>
</tr>
{$SmallTemple$}
</table>
</td>
</tr>
			     

 */
    },
     SmallTemple: function() {
        /**
        
<tr class="addSmallTemp_tr{$Page$}">
<td valign="top">{$smallNum$}</td>
<td valign="top">
<select id="Select3" name="UrbanDepNo" style="width:90%">
<option value="1">待完成 </option>
<option value="1">整改中</option>
<option value="1">已完成</option>
<option value="1">條件不符</option>
</select>
</td>
<td>
 <textarea id="ZsWjOfficeAn"  name="ZsWjOfficeAn" cols="20" rows="2" style="width:100%; height:50px"></textarea>
</td>
<td valign="top"><input type="button" name="insert"  value="-" style="width:80px" onclick="deleteSmallRow(this,'orderSmallTable{$Page$}')" /></td>
</tr>

        */
    }
    };
function insertBigRow()
{
 var rowLength = $(".addBigTemp_tr").length;  
 
    
 var BigTemple = baseCode(TEMPLATE.BigTemple);
 var SmallTableTemple = baseCode(TEMPLATE.SmallTableTemple);
 var SmallTemple = baseCode(TEMPLATE.SmallTemple);
  var insertTemple = BigTemple.replace("{$Page$}",flag)
  .replace("{$Page$}",flag)
   .replace("{$Page$}",flag)
  .replace("{$BigNum$}",rowLength+1)
  .replace("{$SmallTableTemple$}",SmallTableTemple)
  .replace("{$Page$}",flag)
  .replace("{$Page$}",flag).replace("{$Page$}",flag)
  .replace("{$SmallTemple$}",SmallTemple)
  .replace("{$smallNum$}",1)
  .replace("{$Page$}",flag)
  .replace("{$Page$}",flag);
           
   $('#orderTable').append(insertTemple);
   

}


 function deleteBigRow(obj,table_id,rowid) {
 
// var t=document.getElementById(table_id);
   var i = obj.parentNode.parentNode.parentNode.rowIndex;
  
 document.getElementById(table_id).deleteRow((rowid+1));
//     if (confirm("確定刪除該行嗎？")) {
//        var i = obj.parentNode.parentNode.parentNode.rowIndex;
//   
//        //document.getElementById(table_id).deleteRow(i);
//        
//     alert(i)
//     }
 }
 
function insertSmallRow(bid)
{
 var length = $(".addSmallTemp_tr"+bid).length; 
 var SmallTemple = baseCode(TEMPLATE.SmallTemple);
 var insertSmallTemple = SmallTemple
 .replace("{$Page$}",bid)
 .replace("{$Page$}",bid)
 .replace("{$smallNum$}",length+1);        
 $("#orderSmallTable"+bid).append(insertSmallTemple);

}

function deleteSmallRow(obj,table_id)
{
if (confirm("確定刪除該行嗎？")) {
 var i = obj.parentNode.parentNode.rowIndex;
 document.getElementById(table_id).deleteRow(i);
 }
}
</script>