保存更新值的數據庫，並顯示在HTML表格

Question

我有類似下面的表格：

<script> 
    $("#edit").hide(); // Hide the edit table first 

    $("#update").click(function() { 
      $("#edit").toggle(); 
      $("#shown").toggle(); 
      // If we are going from edit table to shown table 

      if($("#shown").is(":visible")) { 

       var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get(); 
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get(); 

       // Then add it to the shown table 
     var baseurl='<?php echo base_url()."index.php/account/insert_voucher";?>'; 

        $.ajax({ 

          type: "POST", 
          url: baseurl, 
          data: $('#edit *').serialize() , 
          cache: false, 
          success: function(html) { 

           alert(html); 

          } 
         }); 

       $(this).val("Edit"); 
      } 
      else $(this).val("Update"); 
     }); 
</script> 

    <table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" class="tbl_grid" id="shown"> 
       <?php if(count($voucher_info) > 0){ ?> 
         <tr class="bgcolor_02"> 
         <td width="22%" height="25" align="center" class="admin" >S.no</td> 
         <td width="37%" align="center" class="admin">Voucher Type</td> 
         <td width="37%" align="center" class="admin">Voucher Mode</td> 
         </tr> 
         <?php 
              $rownum = 1;  
              foreach ($voucher_info as $eachrecord){ 
                $zibracolor = ($rownum%2==0)?"even":"odd"; 
            ?> 
         <tr align="center" class="narmal"> 
         <td height="25"><?php echo $eachrecord->voucher_id; ?></td> 
         <td><?php echo $eachrecord->voucher_type; ?></td> 
          <td><?php echo ucwords($eachrecord->voucher_mode); ?></td>       
         </tr> 
    <?php } 
        }      
        else { 
          echo "<tr class='bgcolor_02'>"; 
          echo "<td align='center'><strong>No records found</strong></td>"; 
          echo "</tr>"; 
        } 
        ?> 


       </table> 

       <table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" 
       id="edit">    
        <?php if(count($voucher_info) > 0){ ?> 
         <tr class="bgcolor_02"> 

          <td width="27%" align="center" class="admin" >S.no</td> 
         <td width="37%" align="center" class="admin" >Voucher Type</td> 
         <td width="47%" align="center" class="admin" >Voucher Mode</td> 

         <!-- <td width="41%" align="center" class="narmal">&nbsp;<strong>Actions</strong></td>--> 

         </tr> 
         <?php 
              $rownum = 1;  
              foreach ($voucher_info as $eachrecord){ 
                $zibracolor = ($rownum%2==0)?"even":"odd"; 
            ?> 
         <tr align="center" class="narmal"> 
         <td height="25"><?php echo $eachrecord->voucher_id ; ?><input type="hidden" name="voucher_id[]" value="<?php echo $eachrecord->voucher_id; ?>" /></td> 
         <td><input name="vouchertype[]" type="text" value="<?php echo $eachrecord->voucher_type; ?>" /></td>  
         <td><select name="mode[]" > 
         <option value="paidin" <?php if($eachrecord->voucher_mode=='paidin') { ?> selected="selected" <?php } ?>>Paid In</option> 
         <option value="paidout" <?php if($eachrecord->voucher_mode=='paidout') { ?> selected="selected" <?php } ?>>Paid Out</option> 
         </select></td>     
         </tr> 
         <?php } }     
        else { 
          echo "<tr class='bgcolor_02'>"; 
          echo "<td align='center'><strong>No records found</strong></td>"; 
          echo "</tr>"; 
        } 
        ?> 

        </table> 
        </td> 
        </tr> 
       <input id="update" type="submit" name="submit" value="Edit"/ 

在第一個表，我從數據庫中顯示的值。但是當用戶點擊表格下方的編輯按鈕時，那麼表格值應該可以爲用戶編輯。我成功地創建了可編輯的字段，但是當用戶單擊提交時，再次更新的值不顯示在第一個表中。我知道這可能與jQuery或JavaScript。當我alert(newsales)，警報是未定義的。

Answer 1

一個簡單的方法來處理，這將是有兩個單獨的表，並在它們之間進行切換，當你編輯表。因此，例如，我們有一個表格，顯示我們的正常數據shown和一個input和select，供用戶輸入名爲edit的數據。這些表格將共享相同的按鈕，點擊後會在表格之間切換，使其看起來像在編輯和顯示模式之間切換。這樣我們可以將edit表中的值複製到shown表中的文本中。這裏有一個例子：

$("#edit").hide(); // Hide the edit table first 
 

 
$("#update").click(function() { 
 
    $("#edit").toggle(); 
 
    $("#shown").toggle(); 
 
    // If we are going from edit table to shown table 
 
    if($("#shown").is(":visible")) { 
 
     // Get the data from the edit table 
 
     var newSales = $("#edit tr:nth-child(1) td input[name='vouchertype']").val(); 
 
     var newPay = $("#edit tr:nth-child(1) td select[name='mode']").val(); 
 
     var newTax = $("#edit tr:nth-child(2) td select[name='tax']").val(); 
 
     // Then add it to the shown table 
 
     $("#shown tr:nth-child(1) td:nth-child(2)").text(newSales); 
 
     $("#shown tr:nth-child(1) td:nth-child(3)").text(newPay); 
 
     $("#shown tr:nth-child(2) td:nth-child(1)").text(newTax); 
 
     $(this).val("Edit"); 
 
    } 
 
    else $(this).val("Update"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="shown"> 
 
    <tr> 
 
     <td>Sr no</td><td>Sales</td><td>Paid in</td> 
 
    </tr> 
 
    <tr><td>Taxed</td></tr> 
 
</table> 
 

 
<table id="edit"> 
 
    <tr> 
 
     <td>Sr no</td><td><input type="text" name="vouchertype" value="Sales" /></td> 
 
    <td> 
 
    <select name="mode"> 
 
     <option value="paidin">Paidin</option> 
 
     <option value="paidout">Paidout</option> 
 
    </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select name="tax"> 
 
      <option value="Taxed">Taxed</option> 
 
      <option value="Not Taxed">Not Taxed</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<input id="update" type="submit" name="submit" value="Edit"/>

注：這是一個答案，原來的問題，這是完全不同的，然後加入新的問題作爲一個編輯。