使用 AJAX 在表中添加新行

我正在尝试使用 Ajax 和 PHP 获取多个表中的下一行。 我的概念是，在更改我的年份和类型选择时，表必须re_appears。如果我更改类型，因为第三年表隐藏并且出现学期第三表。它工作正常，。但是如果我更改年份表行数，也必须根据该行添加。例如，如果第 4 年没有意味着我必须在每个表中获取 FOU 行。我不知道我在哪里打的？

我的代码：

<table>
<tr><td><label><span class="required">*</span>No of Year</label></td>
    <td>
        <select name="no_of_year" id="no_no_year" onchange="change_row()">
        <option value="">--Year--</option>
        <?php for($i=1;$i<=$year;$i++) { ?>
            <option value="<?php echo $i; ?>" <?php if($_POST['no_of_year']==$i) { echo "selected"; } ?>><?php echo $i; ?></option>
        <?php } ?>
        </select>&nbsp;&nbsp;<span class="required"><?php echo $msg_year;?></span>
    </td>
</tr>
<tr> <td><label><span class="required">*</span>Type</label> </td>
    <td><select name="type" onchange="change_col(this.value);"><option value="">--Type--</option> <option value="2" <?php if($_POST['type']=='2') { echo "selected"; } ?>>Semester</option> <option value="1" <?php if($_POST['type']== '1') { echo "selected"; } ?>> Year </option> </select>
    &nbsp;&nbsp;<span class="required"><?php echo $msg_type;?></span></td></tr>
<tr> <td><label><span class="required">*</span>Fees Per Year/Semester:</label> </td> </tr>
<tr>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
  <tr>
    <td>
        <table id="year_tab" cellpadding="1" cellspacing="1"> 
            <tr style="height:37px;"> <th > Year </th> </tr>
            <tr> <td align="center"> <input type="text" name="year1" value="1" /> </td> </tr>
        </table>
     </td>
    <td>
        <table id="sem1_tab" cellpadding="1" cellspacing="1"> 
            <tr> <th colspan="2"> Semester-1 </th> </tr>
            <tr> <th>  Due date</th> <th  > Fees</th> </tr>
            <tr> <td > <input type="text" name="y1_fees1" /> </td><td>  <input type="text" name="y1_due1" /> </td>  </tr>
        </table>
    </td>
    <td id="donshow">
        <table id="sem2_tab" cellpadding="1" cellspacing="1"> 
            <tr> <th colspan="2"  > Semester-2</th> </tr>
            <tr> <th>  Due date</th> <th  > Fees</th> </tr>
            <tr> <td > <input type="text" name="y1_fees2"  /> </td><td  > <input type="text" name="y1_due2"  /> </td> </tr>
        </table>
    </td>
  </tr>
</table>
</tr>
</table>

脚本：

<script type="text/javascript">
function change_col(type)
{
 if(type == 1 ) { 
document.getElementById("donshow").style.display = 'none';
}
else if(type == 2 ) {
document.getElementById("donshow").style.display = 'block';
 } 
}
function change_row(year)
{
    $.ajax({
       type: 'POST',
       url: 'ajax_redirect.php',
       data:{
            type : 'year_tab',
            year : year
       },
       success: function(msg){
            //alert(msg);
            document.getElementByClassName('fees_dets').innerHTML = msg;
       }
           });
}
</script>

ajax_redirect.php

<?
$n= $_POST['year'];
if($_POST['type'] == 'year_tab')
{
for($i=2;$i<=$n;$i++)
{
?>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
  <tr>
    <td>
        <table id="year_tab" cellpadding="1" cellspacing="1"> 
            <tr style="height:37px;"> <th > Year </th> </tr>
            <tr> <td align="center"> <input type="text" name="year<?=$i?>" value="<?=$i?>" /> </td> </tr>
        </table>
     </td>
    <td>
        <table id="sem1_tab" cellpadding="1" cellspacing="1"> 
            <tr> <th colspan="2"> Semester-1 </th> </tr>
            <tr> <th>  Due date</th> <th  > Fees</th> </tr>
            <tr> <td > <input type="text" name="y<?=$i?>_fees1" /> </td><td>  <input type="text" name="y<?=$i?>_due1" /> </td>  </tr>
        </table>
    </td>
    <td id="donshow">
        <table id="sem2_tab" cellpadding="1" cellspacing="1"> 
            <tr> <th colspan="2"  > Semester-2</th> </tr>
            <tr> <th>  Due date</th> <th  > Fees</th> </tr>
            <tr> <td > <input type="text" name="y<?=$i?>_fees2"  /> </td><td  > <input type="text" name="y<?=$i?>_due2"  /> </td> </tr>
        </table>
    </td>
  </tr>
</table>
<? }
}
?>

谁能帮忙？