jquery 动态添加删除表格，完善2个bug版

2019独角兽企业重金招聘Python工程师标准>>>

$(document).ready(function(){ 

      
    $('#send_ajax').click(function (){
        var keys=$('#keyword').val();
        
        if(keys==''){alert('请输入搜索内容'); return false;} 


      $.ajax({
       url:'<?php echo '/admin.php/goods_inventory/getgoods';?>',//+keys, //后台处理程序
       type:'post',         //数据发送方式
       dataType:'json',   //接受数据格式
       data:{'key':keys},
       success:gogo 
        
              });
          });
 
     function gogo(data){
                 var j=data.length;
                 var i=null;
                 var h=data; 
                
                $("#users_lists").find("option").remove();
               
                for( i =0;i<j;i++){
                    
                      $('#users_lists').append('<option value="'+h[i].goods_id+'">'+h[i].goods_name+'--'+h[i].spec+'</option>');
                    
                } 


               } 






    $('#addgoods').click(function (){
        var na =$("#users_lists").find("option:selected").val();
        
        if(na==0){alert('请先选择商品'); return false;} 
  
        $.ajax({
       url:'<?php echo '/admin.php/goods_inventory/getgoodsinfo';?>',//+keys, //后台处理程序
       type:'post',         //数据发送方式
       dataType:'json',   //接受数据格式
       data:{'key':na},
       success:youget     
              });
          }); 


      function youget(data) {
          var gd=data; 
          var max_line_num = 1;
          var line = '';


    max_line_num = $("#list tbody tr:last-child").children("td").html();
     
    if (max_line_num == null) {
      max_line_num = 1;
    } else {
      max_line_num = parseInt(max_line_num);
      max_line_num += 1;
    }


    
    var list_str = "<tr id='"+($('#mainTable').find('tr').length++)+"'  >" 
        + "<td style='auto' >"
        + ($("#mainTable").find("tr").length++)
        + "</td>"
        + "<td style='auto' >"+gd['goods_name']+"</td>" 
        + "<td style='auto' >"+gd['spec']+"</td>"
        + "<td style='auto' >"+gd['unit']+"</td>"
        + "<td style='auto'>"+gd['factory_name']+"</td>" 
        + "<td style='auto' ><input type='text' value='商品' /></td>"
        + "<td style='auto' > <input type='text' name='starttime' maxlength='60' size='20' readonly='readonly' id='starttimeid"+($('#mainTable').find('tr').length++)+"'/><input name='times' type='button' id='starttimebtn"+gd['goods_id']+"' οnclick=\"return showCalendar('starttimeid"+($('#mainTable').find('tr').length++)+"', '%Y-%m-%d', '24', false, 'starttimebtn"+gd['goods_id']+"');\" value='选择' class='button'></td>"
        + "<td style='auto' ><input type='text' value='数量' /></td>"
        + "<td style='auto' ><input name='del' οnclick='$(\"tr[id="+($('#mainTable').find('tr').length++)+"]\").remove()'  type='button' value='删除'/></td>" 
        + "</tr>";
        $("#mainTable").append(list_str);
     

      }

这段代码的问题在于 id 会重复删除时会误删除

 简单方法就是把删除改为

<td align='center' style='auto' ><input name='del' onclick='$(this).parent().parent().remove()'  type='button' value='删除'/></td>

不过还有会有问题就是id会重复，那么不重复的id去一个简单的数字就是时间戳，只是会很长不过绝对不会重复

var time=Math.round(new Date().getTime()/1000);

js没有类似php的time()函数类的直接获取unix timestamp的时间戳的函数。

new Date() 初始化一个日期时间对象

get.Time() 因为取的是毫秒数，所以要除以1000

Math.round 将值舍入至最接近的整数或是指定的小数位数数字，和php的ceil函数类似的效果

转载于:https://my.oschina.net/startphp/blog/123331