摘要:需求是:一个表格可以动态的增加tr,同时在每个td的里面的值进行更改的时候,对应第三第四个td里面有具体的提示出来
<!--分拆表-->
<div class="form-group col-md-10 container">
<table class="table table-bordered">
<caption style="text-align: center;"><strong>{:L("_IT_SPLIT_TABLE")}</strong></caption>
<thead>
<tr>
<th>{:L("_FINANCE_ORDER_NO")}</th>
<th>{:L("_FINANCE_PAYMENT_LIST_TABLE_APPLY_USER_AMOUNT")}</th>
<th>{:L("_FINANCE_TRADE")}</th>
<th>{:L("_FINANCE_CAOZUO_FANG")}</th>
<th>{:L("_IT_HANDLE")}</th>
</tr>
</thead>
<tbody id='t_body'>
<tr>
<td><input type='text' class="form-control" name="split_order[]" onblur="check_order(this)" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,'');}).call(this)" maxlength="7"></td>
<td><input type='text' class="form-control" name="split_amount[]" onblur="check_order(this)" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,'');}).call(this)"></td>
<td><input type="text" class="form-control" name="split_trade[]" onfocus="this.blur();"></td>
<td><input type="text" class="form-control" name="split_operators[]" onfocus="this.blur();"></td>
<td>
<a class="btn btn-info btn-xs" onclick="add_split_table(this)" title="Add">[+]</a>
<a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>
</td>
</tr>
</tbody>
</table>
</div>
<!--end分拆表-->
function add_split_table(){
var table_html = ' <tr>\n'
+ ' <td><input type=\'text\' class="form-control" name="split_order[]" onblur="check_order(this)" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,\'\');}).call(this)" onblur="this.v();" maxlength="7"></td>\n'
+ ' <td><input type=\'text\' class="form-control" name="split_amount[]" onblur="check_order(this)" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,\'\');}).call(this)"></td>\n'
+ ' <td><input type="text" class="form-control" name="split_trade[]" onfocus="this.blur();"></td>\n'
+ ' <td><input type="text" class="form-control" name="split_operators[]" onfocus="this.blur();"></td>\n'
+ ' <td>\n'
+ ' <a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>\n'
+ ' </td>\n'
+ ' </tr>';
$('#t_body').append(table_html);
}
function del_split_table(obj){
$(obj).parent().parent().remove();
}
function check_order(obj){
$("#payment_submit").attr('disabled',true);
var this_order_no = $(obj).parent().parent().children('td').eq(0).find('input').val();
if(this_order_no ==''){
$(obj).parent().parent().children('td').eq(2).find('input').val('No');
$(obj).parent().parent().children('td').eq(0).find('input').attr('placeholder','{:L("_FINANCE_NO_ORDER_NO")}');
$(obj).parent().parent().children('td').eq(3).find('input').val('No');
return;
}
var this_amount = $(obj).parent().parent().children('td').eq(1).find('input').val();
if(this_amount == ''){
$(obj).parent().parent().children('td').eq(2).find('input').val('No');
$(obj).parent().parent().children('td').eq(3).find('input').val('No');
$(obj).parent().parent().children('td').eq(1).find('input').attr('placeholder','{:L("_FINANCE_AMOUNT_NULL")}');
return;
}
$.post("__CONTROLLER__/check_split_payment",{'order_no':this_order_no},function(m){
if(m.f){
var data = m.data;
var trade = data.trade;
var operators = data.operator;
$(obj).parent().parent().children('td').eq(2).find('input').val(trade);
$(obj).parent().parent().children('td').eq(3).find('input').val(operators);
$("#payment_submit").attr('disabled',false);
}else{
$(obj).parent().parent().children('td').eq(0).find('input').val('{:L("_FINANCE_ERROR_ORDER_NO")}');
$(obj).parent().parent().children('td').eq(2).find('input').val('No');
$(obj).parent().parent().children('td').eq(3).find('input').val('No');
}
},"json"
);
}