将更新的值保存到数据库并在html表中显示它们

时间:2015-02-09 05:07:26

标签: javascript php jquery html ajax

我有一张如下表格:

    <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)时,警报未定义。

1 个答案:

答案 0 :(得分:1)

处理此问题的一种简单方法是使用两个单独的表,并在编辑表时在它们之间切换。例如,我们有一个表格,其中显示了名为shown的常规数据和一个inputselect的数据,供用户输入名为edit的数据。这些表将共享相同的按钮,当单击它时,它将在表之间切换,使其看起来像在编辑和显示模式之间切换。这样我们就可以将edit表中的值复制到shown表中的文本。这是一个例子:

&#13;
&#13;
$("#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");
});
&#13;
<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"/>
&#13;
&#13;
&#13;

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