保存更新值的数据库，并显示在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"/>

注：这是一个答案，原来的问题，这是完全不同的，然后加入新的问题作为一个编辑。