js控制table增减行（例如：订单添加删除商品）

最新推荐文章于 2022-04-07 21:04:54 发布

听海Movie

最新推荐文章于 2022-04-07 21:04:54 发布

阅读量5.1k

点赞数 2

分类专栏：工作笔记 js应用 Html

本文链接：https://blog.csdn.net/u011781769/article/details/41008013

版权

这篇博客介绍如何使用JavaScript动态控制HTML表格，实现订单商品的添加与删除功能。通过示例代码和product_pay.js文件，展示了具体的实现步骤和最终效果。

摘要由CSDN通过智能技术生成

【html代码】

<a class="btn btn-xs btn-warning" href="javascript:void(0)" οnclick="add_products();">添加商品</a>
			<div style="width:800px;" class="user-group" data="" data-form="form[uids][]" data-multi="true" ></div>
			<div style="min-height:150px;" class="callout">
				<table class="table table-bordered bg-white" id="ProductsInfoShow">
					<thead>
						<tr>
							<th style="width:5%">编号</th>
							<th style="width:50%">商品名称</th>
							<th style="width:10%">单价</th>
							<th style="width:10%">购买数量</th>
							<th style="width:15%">小计</th>
							<th style="width:10%">操作</th>
						</tr>
					</thead>
					<tbody class="tbodyProduct">
					<? if($detail_rows):?>
					<? foreach ($detail_rows as $detail_row): ?>
						<tr class="demoProduct">
						<td id="product_id">
							<input type="hidden" value="<? echo $detail_row->product_id;?>" name="product_id[]">
							<? echo $detail_row->product_id;?></td>

						<td i d="product_name">
							<? echo $detail_row->product_name;?></td>

						<td id="price_item_<? echo $detail_row->product_id;?>">
						<strong><? echo '￥'.$detail_row->price;?></strong></td>

						<td>
							<div class="f_l add_chose">
							<a class="reduce" onClick="setAmount.reduce('#qty_item_<? echo $detail_row->product_id;?>')" href="javascript:void(0)">-</a>
							
							<input type="text" name="qty_item_<? echo $detail_row->product_id;?>" value=<? echo $detail_row->buy_num; ?> id="qty_item_<? echo $detail_row->product_id;?>" onKeyUp="setAmount.modify('#qty_item_<? echo $detail_row->product_id;?>')" class="text" />
							
							<a class="add" onClick="setAmount.add('#qty_item_<? echo $detail_row->product_id;?>')" href="javascript:void(0)">+</a></div></td>

						<td><span class="total-font" id="total_item_<? echo $detail_row->product_id;?>">
						<? echo '￥'.($detail_row->price)*($detail_row->buy_num) ?></span>
						</td>

						<td>
						<input type="button" value="[删除]" class="del" ></td>
						</tr>
					<? endforeach; ?>
					<? endif ;?>
					<tr class="all_price">
						<td></td>
						<td></td>
						<td></td>
						<td><strong style="font-size:18px;">合计:<strong></td>
						<td><div  class="total-rows"><em>
						<input type="hidden" id="total_item" name="form[total_price]" value="0"/>
						￥<label