使用ajax在表中添加新行

时间:2013-10-22 09:53:01

标签: php html ajax

我正在尝试使用ajax和php在我的多个表中获取下一行。我的概念是,在改变我的年份和类型选择时,表必须重新出现。 如果我改变类型作为第三年表隐藏和如果学期第三个表出现。它工作正常。但如果我改变年份表行,也必须根据那个添加。 例如,如果没有4年的意思,那么我必须在每个表中得到f行。 我在哪里来到这里?

我的代码:

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

任何人都可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

每次更改'no'时都需要点击ajax_redirect.php。几年',你的ajax_redirect.php必须执行对关联表的select查询和更改where子句。无论您使用何种HTML元素,都必须相应地替换为新值。

  

注意:这里我假设您从数据库中获取数据,这就是我的原因   要求您在asssociated表上使用select查询并更改位置   子句。

更新:您的问题与document.getElementByClassName('fees_dets')一致,因为没有getElementByClassName这样的功能......您应该在具有属性ID的DIV中使用{getElementById 1}}