jq 动态表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <script src="jquery1.8.3.min.js"></script>
  <style>
     table{border-collapse:collapse;width:100%;height:50px;font-size:14px;}
     table td{border:1px solid #000;}
     .red{background:#669933;}
     .green{background:#996666;}
     .selectC{background:#99CCCC;}
  </style>
 </HEAD>
 <BODY>
    <input type="button" value="添加一行" id="addTr"/>
    <input type="button" value="删除选中" id="delTrS"/>
    <table>
    <thead>
       <tr>
         <td>全选<input type="checkbox" name="quanxuan" id="checkAll"/> 
         </td><td>商品名称</td><td>商品单价</td><td>商品数量</td><td>商品金额</td><td>操作</td>
       </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td><input type="checkbox" class="ck"/></td>
        <td><input type="text" class="productName"/></td>
        <td><input type="text" class="price"/></td>
        <td>
            <input type="button" value="+" class="addnum">
            <input type="text" class="productSum"/>
            <input type="button" value="-" class="addnum">
        </td>
        <td><span class="countMoney"></span></td>
        <td id="delBtn">删除</td>
      </tr>
     </tbody>
   </table>
   <h1>合计:</h1><span id="hj"></span>
 </BODY>
 <script>
    //商品数量
     $(".addnum").click(function(){
        var tr=$(this).parent().parent();
        var value=$(this).val();
        var num=0;
        if(value=="+"){
            num=Number(tr.find(".productSum").val())+1;
            tr.find(".productSum").val(num);
        }
        if(value=="-"){
            num=Number(tr.find(".productSum").val())-1;
            tr.find(".productSum").val(num);
        }
        tr.find(".productSum").trigger("blur");
         
    });
    //改变颜色
    function chColor(){
        $("#tbody tr").removeClass('green').removeClass('red');
        $("#tbody tr:even").addClass("green");
        $("#tbody tr:odd").addClass("red");
    }
    chColor();
    //选择变色
    $("#tbody").on("click",".ck",function(){
        if($(this).prop("checked")){
            $(this).parent().parent().addClass("selectC");

        }else{
            $(this).parent().parent().removeClass("selectC");
        }
    });
     //添加一行
     $('#addTr').click(function(){
        var html='<tr>';
            html=html+'<td><input type="checkbox" class="ck"/></td>';
            html=html+'<td><input type="text" class="productName"/></td>';
            html=html+' <td><input type="text" class="price"/></td>';
            html=html+'<td>';
            html=html+'<input type="button" value="+" class="addnum">';
            html=html+'<input type="text" class="productSum"/>';
            html=html+'<input type="button" value="-" class="addnum">';
            html=html+'</td>';
            html=html+'<td><span class="countMoney"></span></td>';
            html=html+'<td id="delBtn">删除</td>';
          html=html+' </tr>';
        $('#tbody').append(html);
        
        //$(".productSum").trigger("blur");
        chColor();
     });
     //删除一行
     $('#tbody').on('click','#delBtn',function(){
        var tr=$(this).parent();
        tr.remove();
        $('#hj').trigger('blur');
     });
     //全选
    $('#checkAll').click(function(){
        var checked=$(this).attr('checked');
        if(checked=='checked'){
            $('.ck').attr('checked','checked');
            $(".ck").parent().parent().addClass("selectC");
        }else{
            $('.ck').removeAttr('checked');
            $(".ck").parent().parent().removeClass("selectC");
        }
        chColor();
        $('#hj').trigger('blur');
    });
    //删除选中
    $('#delTrS').click(function(){
        $('.ck:checked').each(function(){
            $(this).parent().parent().remove();
        });
        $('#hj').trigger('blur');
    });
    //商品金额
    $('#tbody').on('blur','.price,.productSum',function(){
        var tr=$(this).parent().parent();
        var price=tr.find(".price").val();
        var productSum=tr.find(".productSum").val();
        var countMoney=Number(price)*Number(productSum);
        tr.find(".countMoney").html(countMoney);
         hj()    
    });
    //合计
    $('#tbody').on('click','.ck',function(){
        hj();
    });
    function hj(){
        var pri=0;
        $("#tbody .ck:checked").each(function(){
            var tr=$(this).parent().parent();
            pri=pri+parseInt(tr.find(".countMoney").html());
            //$('#hj').trigger('click');

        });
        $('#hj').html(pri);
    }
 </script>
</HTML>
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq datatable 是一个非常流行的 jQuery 表格插件,它可以快速方便地实现表格的排序、搜索、分页等功能。而在实际开发中,我们可能需要动态地传递参数来进行分页,使得表格能够根据具体情况显示不同的数据。为了实现这个需求,我们需要采取以下步骤: 1、配置 datatable 的参数 在初始化 datatable 时,我们需要设置一些参数,包括数据源、列信息、分页等。在处理动态分页时,我们需要特别设置以下几个参数: ①sPaginationType:分页类型,由于我们需要进行动态分页,所以可以设置为 simple_numbers(只显示数字,没有上一页、下一页等按钮)。 ②iDisplayLength:每页显示多少条数据,这个参数可以动态传入,因此可以暂时设置成一个默认值。 ③iDisplayStart:从第几条数据开始显示,这个参数也可以动态传入,因此可以暂时设置成 0。 2、更新 datatable 的分页信息 当我们需要更新表格的分页信息时,可以使用 API 中的 fnSettings() 方法获取当前 datatable 的配置参数,并对其进行修改即可。具体步骤如下: ①使用 fnSettings() 方法获取 datatable 的配置参数。 var settings = $("#example").dataTable().fnSettings(); ②根据需要修改 iDisplayLength 和 iDisplayStart 两个参数。 settings._iDisplayLength = pageSize; // 每页显示条数 settings._iDisplayStart = start; // 起始位置 ③更新表格中的数据。 $("#example").dataTable().fnDraw(); 通过以上步骤,我们就可以实现动态传递参数来进行 datatable 的分页操作,实现了更加灵活的数据处理需求。当然,在实际应用中,还需要注意一些细节问题,比如数据量较大时可能会出现性能问题,需要注意代码的优化等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值