表格动态加减及获取对应的指定位置td的数据

摘要:需求是:一个表格可以动态的增加tr,同时在每个td的里面的值进行更改的时候,对应第三第四个td里面有具体的提示出来

主要就是JQ的一些定位

HTML代码

  <!--分拆表-->
  <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分拆表-->

JQ 代码

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"
            );

        }
评论
  • 2018-11-20 16:18:29 by Eric Guo
    获取最后一个tbody $('tbody:last').after(html);
  • 2018-11-20 16:15:09 by Eric Guo
    使用的时候最好不要用id来,可以使用obj进行操作 $(obj).parent().parent().parent().append(table_html);
  • 2018-11-20 16:14:38 by Eric Guo
    也可以添加多个tbody实现多级的动态加减嵌套
  • 2018-11-09 14:01:52 by Eric Guo
    限制输入的长度 maxlength="7"
  • 2018-11-09 14:01:32 by Eric Guo
    限制金额输入的只有数字跟小数点 onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,'');}).call(this)"