将更新后的值保存到数据库中,并在html表中显示
Save updated values to database and show them in html table
我有一个如下表:
<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是可能的。当I 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"/>
注意:这是对原始问题的回答,与作为编辑添加的新问题截然不同。
相关文章:
- 如何获取javascript输入并在html中调用它
- 使用javascript读取本地XML文件并在html页面中显示
- 在Javascript中解析json并在html上创建表
- 如何使用 JQuQuery 解析 JSON 对象并在 HTML 页面中以表格格式打印输出
- 在不使用jQuery的情况下解析json,并在HTML代码中添加值
- 使用PHP和JavaScript动态搜索SQL表并在HTML上显示
- 在javascript中分配变量值,并在html中使用
- 将更新后的值保存到数据库中,并在html表中显示
- 无法从承诺中填充列表并在 html - aurelia.
- var.push 并在 HTML 页面中显示我的新临时信息
- javascript的新手,我将如何嵌入我的javascript文件并在HTML字段中运行它
- 如何在 jQuery 中读取 xml 文件内容并在 html 元素中显示
- 如何将项目添加到 javascript 数组并在 html
- 中显示该数组
- 将街道地址转换为坐标并在 html 中放置
- 使用 Java 脚本打开图像并在 html 中调用该函数
- 用颜色填充t恤,并在HTML画布上相应地更改文本颜色
- 如何从.txt文件中提取内容并在HTML中随机显示一行
- mozilla firefox扩展:创建一个javascript库并在HTML页面中使用它
- 如何将行值移动到另一个表,并在html中重做到上一个表
- 如何在AngularJS中查找值并在HTML表中显示数据