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

注意：这是对原始问题的回答，与作为编辑添加的新问题完全不同。