js动态每一行可以添加和删除,最后将结果放到json中
普通h5就用个数组去存，每次点击加号时，给数组添加一个对象，然后用js添加节点
用js添加节点时给减号添加删除事件，传入当前对象在数组中的位置
点击删除时，从数组删除对象，再从表格中删除对应节点，可以加id标识或者直接获取children数组操作
点击保存时，把储存数据的对象用JSON.stringfy转成json字符串
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
table {
border-collapse:collapse;
}
table,td,th {
border:1px solid black;
}
.tablex{
border: 1px solid #ccc;border-collapse: collapse; width:80%;text-align:center;
}
.tablex th,.tablex td{
border: 1px solid #ccc;padding: 10px;
}
</style>
</head>
<body>
<input id="c-order_name" data-rule="required" class="form-control" name="id" type="hidden" value="{$row.id}">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Order_name')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-order_name" data-rule="required" class="form-control" name="order_name" type="text" value="{$row.order_name|htmlentities}">
</div>
</div>
<table class="tablex" id="table" width="70%" cellspacing="0" style="border: 1px solid">
<thead>
<tr>
<th width="10%">操作</th>
<th width="45%" style="text-align: center">ID</th>
<th width="50%" style="text-align: center">order_id</th>
<th width="50%" style="text-align: center">order_item_name</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<!-- <td style="text-align: center"><input type="checkbox" name="ckb"></td> -->
<td><input type='button' class='btn-default' onclick="addTr2('table', -1)" value='+'><input type='button' class='btn-default' onclick='del(this)' value='-' ></td>
<td encreq="false" contenteditable="true" style=" word-break: break-word; word-wrap: break-word;"></td>
<td encreq="false" contenteditable="true" style=" word-break: break-word; word-wrap: break-word;"></td>
<td encreq="false" contenteditable="true" style=" word-break: break-word; word-wrap: break-word;"></td>
</tr>
</tbody>
</table>
<!-- <p><input type="button" class="btn-primary" onclick="getTableData()" value="保存"></p> -->
<div class="form-group">
<table class="tablex">
<thead>
<th width='100%' colspan="7"><span>orderitem表关联信息</span>
</thead>
<tr align="center">
<td><b></b>id</td>
<td><b></b>order_id</td>
<td><b></b>order_item_name</td>
<td><b></b>单价</td>
<td><b></b>数量</td>
<td><b></b>总额</td>
</tr>
{foreach name="item" item="vo" }
<tr>
<td>
{$vo['oid']}
</td>
<td>
{$vo['order_id']}
</td>
<td>
{$vo['order_item_name']}
</td>
<td>
{$vo['price']}
</td>
<td>
{$vo['qty']}
</td>
<td>
{$vo['qty']*$vo['price']}
</td>
</tr>
{/foreach}
</table>
</div>
<div class="form-group">
<label for="c-jointime" class="control-label col-xs-12 col-sm-2">{:__('create_tiem')}:</label>
<div class="col-xs-12 col-sm-4">
<input id="c-jointime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="create_tiem" type="text" value="{$row.create_tiem|datetime}">
</div>
</div>
<p><input type="button" class="btn-primary" onclick="getTableData()" value="保存"></p>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" ></script>
<script>
function addTr(table, row, trHtml) {
//获取table最后一行 $("#table tr:last")
//获取table第一行 $("#table tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
var $tr = $("#" + table + " tr").eq(row);
if ($tr.size() == 0) {
$tr.after(trHtml);
alert("指定的table id或行数不存在！");
return;
}
$tr.after(trHtml);
}
function addTr2(table, row) {
var trHtml = "<tr><td><input type='button' onclick='addTr2()' value='+'><input type='button' onclick='del(this)' value='-'></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td><td encreq=\"false\" contenteditable=\"true\" style=\" word-break: break-word; word-wrap: break-word;\"></td></tr>";
table = 'table'
row = -1
addTr(table, row, trHtml);
}
function del(obj)
{
var len = $("#tbody").find("tr").length ;
if(len>1){
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);}
}
function getTableData() {
var arr = new Array();
var trList = $("#tbody").children("tr");
for (var i = 0; i < trList.length; i++) {
var json = {};
var tdArr = trList.eq(i).find("td");
json.ID = tdArr.eq(1).text();
json.orderid = tdArr.eq(2).text();
json.itemname = tdArr.eq(3).text();
if (json.ID == "" || json.orderid == "" || json.itemname == "") {
alert("输入信息不能为空");
return;
} else {
arr.push(json);
}
}
var order_name = $("input[name='order_name']").val();
var create_tiem = $("input[name='create_tiem']").val();
var id = $("input[name='id']").val();
$.ajax({
url:"{:url('Order/realization')}",
type:'post',
data:{arr:JSON.stringify(arr),create_tiem:create_tiem,order_name:order_name,id:id},
// data:formdata,
success:function(data,rest){
//关闭弹出框
Fast.api.close(data);
//刷新父级页面
window.parent.location.reload();
//刷新当前页面
table.bootstrapTable('refresh', {});
return true;
}
});
return arr;
}
</script>
</html>