如何使用jQuery给Table动态增加行、清空table

这篇文章主要介绍了如何使用jQuery给Table动态增加行、清空table,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的中山网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

使用jQuery给Table动态增加行的代码如下所示:

JS方法如下:

$(document).ready(function(){
  
  getFrjl();
  $('#addFrjl').click(function(){
  var trHTML = ''+
  ''+
  '从'+
  '至'+
  ''+
  ''+
  ''+
  ''+
  ''+
  ''+
  ''+
  ''+
  ''+
  '删除'+
  '
'+   ''+   '';   $('#frjlTable tbody').append(trHTML);  });    //点击保存  $('#sure').click(function(){   var frjlList = new Array();   var flag =true;      if($(".frjlClass").size()==0){   $("#jlError").html("个人简历不能为空");   return;   }else{   $(".frjlClass").each(function(i){   var frjl = {};   frjl.kssj = $(this).find('#nyks').val();   frjl.jssj = $(this).find('#nyjs').val();   frjl.gzdw = $(this).find('#frgzdw').val();   frjl.gzzw = $(this).find('#frgzzw').val();      if(frjl.kssj.length==0){   $("#jlError").html("个人简历第"+(i+1)+"行开始日期不能为空");   flag = false;   return false;   }else{   if(frjl.jssj.length>0){    var startTmp=frjl.kssj.split("-");       var endTmp=frjl.jssj.split("-");       var sd=new Date(startTmp[0],startTmp[1],startTmp[2]);       var ed=new Date(endTmp[0],endTmp[1],endTmp[2]);       if(sd.getTime()>ed.getTime()){         $("#jlError").html("个人简历第"+(i+1)+"行开始日期不能大于结束日期");        flag = false;        return false;       }    }   }      if(frjl.gzdw.trim().length==0){   $("#jlError").html("个人简历第"+(i+1)+"行工作单位不能为空");   flag = false;   return false;   }   if(frjl.gzzw.trim().length==0){   $("#jlError").html("个人简历第"+(i+1)+"行职务不能为空");   flag = false;   return false;   }      frjlList.push(frjl);   });   }      var frList = JSON.stringify(frjlList);    $("#optionList").val(frList);   if(flag){   $('#frjlForm').submit();   }  });    });       function delTr(obj) {     $(obj).parents("tr").remove();   }         function getFrjl(){   var rybh = $("#fzrbh").val();   var url = "../tStglRyjlxxJson/getFrjlList.action?rybh="+rybh;   $.ajax({   url:url,   success:function(data){    var json = eval(data);    var array = new Array();    for(var i=0;i'+   ''+   '从'+   '至'+   ''+   ''+    ''+   ''+   ''+    ''+   ''+   ''+    ''+    '删除'+    '
'+   ''+   '';    $('#frjlTable tbody').append(trHTML);        }       },   });      }    function getJsonLength(jsonObj){   var length = 0;   for(var item in jsonObj){   length ++;   }   return length;   }

jquery动态清空table的方法如下:

比如设置table的id为tab

var trHTML = "..."
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行
$("#tab tr:not(:first)").empty(); //清空table(除了第一行以外)

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用jQuery给Table动态增加行、清空table”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


新闻名称:如何使用jQuery给Table动态增加行、清空table
标题URL:http://pwwzsj.com/article/iggchj.html

其他资讯