使用ajax在表中添加新行

Question

我想要使用ajax和php在我的多個表中獲取下一行。我的觀念是，在改變我的年份和類型選擇時，表格必須重新出現。 如果我改變類型爲年份第三表隱藏和如果學期第三表出現。它工作正常。但如果我改變沒有一年的錶行也必須根據這一點添加。例如 如果4年中沒有一個意味着那麼我必須在每個表中獲得fou行。 我dono在哪裏我在這裏？

我的代碼：

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

誰能幫助？

Answer 1

您每次更改'否「時都需要點擊ajax_redirect.php。的年份'，你的ajax_redirect.php必須通過改變where子句來執行select關聯表的查詢。無論您使用的HTML元素是什麼，都必須相應地用新值替換。

注意：在這裏，我假設你是從數據庫中獲取數據這就是爲什麼我有 問你使用的asssociated表選擇查詢與變更，其中 條款。

UPDATE：你的問題是與document.getElementByClassName('fees_dets')因爲那裏getElementByClassName沒有這種功能...你應該在你的一個屬性ID的DIV表並使用getElementById