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

JS方法如下:

$(document).ready(function(){
  
  getFrjl();
  $('#addFrjl').click(function(){
  var trHTML = '<tr class = "frjlClass">' 
  '<td>' 
  '从<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyks" cssClass="weui_input" placeholder="请输入开始日期"><s:param name="value"><s:date name="e.nyks" format="yyyy-MM-dd"></s:date></s:param></s:textfield>' 
  '至<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyjs" cssClass="weui_input" placeholder="请输入结束日期"><s:param name="value"><s:date name="e.nyjs" format="yyyy-MM-dd"></s:date></s:param></s:textfield>' 
  '</td>' 
  '<td>' 
  '<s:textfield id="frgzdw" cssClass="weui_input" placeholder="请输入工作单位"></s:textfield>' 
  '</td>' 
  '<td>' 
  '<s:textfield id="frgzzw" cssClass="weui_input" placeholder="请输入职务"></s:textfield>' 
  '</td>' 
  '<td>' 
  '<div style="float: right;">' 
  '<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="delTr(this);">删除</s:a>' 
  '</div>' 
  '</td>' 
  '</tr>';
  $('#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<getJsonLength(json);i  ){
   var nyjsrq = json[i].nyjs==null ? "" :json[i].nyjs.substring(0,10);
   var trHTML = '<tr class = "frjlClass">' 
  '<td>' 
  '从<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyks" cssClass="weui_input" placeholder="请输入开始日期" value="' json[i].nyks.substring(0,10) '"><s:param name="value" value=" json[i].nyks.substring(0,10) "><s:date name="e.nyks" format="yyyy-MM-dd"></s:date></s:param></s:textfield>' 
  '至<s:textfield onClick="WdatePicker();" cssStyle="width:150px;text-align:center;" id="nyjs" cssClass="weui_input" placeholder="请输入结束日期" value="' nyjsrq '"><s:param name="value" value=" json[i].nyjs.substring(0,10) "><s:date name="e.nyjs" format="yyyy-MM-dd"></s:date></s:param></s:textfield>' 
  '</td>' 
  '<td>' 
   '<s:textfield id="frgzdw" cssClass="weui_input" placeholder="请输入工作单位" value="' json[i].dw '"></s:textfield>' 
  '</td>' 
  '<td>' 
   '<s:textfield id="frgzzw" cssClass="weui_input" placeholder="请输入职务" value="' json[i].drzw '"></s:textfield>' 
  '</td>' 
  '<td>' 
   '<div style="float: right;">' 
   '<s:a cssClass="weui_btn weui_btn_plain_primary weui_btn_operation" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="delTr(this);">删除</s:a>' 
   '</div>' 
  '</td>' 
  '</tr>';
   $('#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 = "<tr><td>...</td></tr>"
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行
$("#tab tr:not(:first)").empty(); //清空table(除了第一行以外)

总结

以上所述是小编给大家介绍的使用jQuery给Table动态增加行、清空table的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

使用jQuery给Table动态增加行、清空table的方法的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  3. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  4. 第七章:table单元格的选择和UIAlertController

    运行app,自己试试选择cell更多关于UIAlertController再继续研究之前,我们需要更多的了解一下UIAlertController。UIAlertController是在iOS8引入用来替代UIAlertView和UIActionSheet的。参照上面的代码片段,我们可以指定UIAlertController的preferredStyle。创建好动作后可以使用addAction将动作和UIAlertController连接起来。这就是使用UIAlertController的方法。

  5. tableview使用自定义类,页面跳转,本地存储

    如图,添加下面的三行代码2下面创建自己的cell,新建一个swift文件,命名为TableViewCell3因为还要考虑到界面的跳转,需要新建swift文件PushTest

  6. Swift UITableView相关功能八

    但是,我们发现当我们点击右侧索引的时候好像和table的关系不明确。其实我们少了一个代理方法,他是专门用来关联索引和table分区的这里我们简单设置了一下,将字母顺序和table的分区对应上了。

  7. Swift设置Table View的Cell中Lable自适应内容高度的

    Swift设置TableView的Cell中Lable自适应内容高度的最后修改在TableCell中Label的lines属性,将其设置为0。

  8. 更加 Swift 化的 Collection View 和 Table View Cells

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  9. 制作一个可以滑动操作的 Table View Cell

    本教程将会向你展示如何制作一个这样的TableViewCell,而不用因嵌套的ScrollView陷入困境。如果你还不知道一个可滑动的TableViewCell意味着什么,那么看看Apple的邮件应用:可能你会想,既然Apple展示了这种方案,那它应该已将其开放给开发者使用了。这会要求你深入研究iOS7UITableViewCell的结构,以便复制出我们需要的行为。打开MasterViewController.m并找到viewDidLoad。这个循环添加了一些字符串到_objects数组,应用运行时,这些

  10. 如何实现可收起和展开的Table Section

    如何实现可收起和展开的TableSection这是一个简单的iOSswift项目,旨在介绍如何实现可收起和展开的tablesection,并且,项目不需要mainstoryboard,XIB,注册nib等,只需要纯的Swfit代码!切换收起和展开的函数如下:注意到我们不是简单的重绘整个section,实际上我们只需要重绘section里的所有cell就好,这样做的好处是避免了sectionheader因重绘时闪烁的效果,最重要是的可以让我们更平滑地处理我们想要的动画效果,例如旋转那个箭头,改变背景颜色等等

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部