保存更新值的数据库,并显示在HTML表格
我有类似下面的表格:保存更新值的数据库,并显示在HTML表格
<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"> <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)
,警报是未定义的。
一个简单的方法来处理,这将是有两个单独的表,并在它们之间进行切换,当你编辑表。因此,例如,我们有一个表格,显示我们的正常数据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"/>
注:这是一个答案,原来的问题,这是完全不同的,然后加入新的问题作为一个编辑。
@KedarB在选择器'#shown tr td:nth-child(2)'中选择第n行('tr'),你可以在'tr'上执行':n-child(n)'。因此,例如,该行中的第一行和第二个“td”将是:'#shown tr:nth-child(1)td:nth-child(2)'。 – 2015-02-09 06:32:16
@KedarB好的,我添加了第二行。 – 2015-02-09 06:50:32
@KedarB您完全更改了HTML结构,与原始问题相同。例如,你删除了'name =“vouchertype”',那么很明显,当这段代码试图获得它时:'编辑tr:nth-child(1)td input [name ='vouchertype']'它不会工作,因为你删除了HTML中的名称。 – 2015-02-09 12:43:59
雇用开发人员:) – Timmerz 2015-02-09 05:16:37
详细阐述您的问题?你想要做什么?它不清楚 – 2015-02-09 05:29:33