使用jQuery给Table动态增加行、清空table的方法


Posted in jQuery onSeptember 05, 2018

使用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的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
You might like
PHP 各种排序算法实现代码
2009/08/20 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
学习ExtJS table布局
2009/10/08 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python实现Zabbix-API监控
2018/09/17 Python
详解python读取image
2019/04/03 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
联谊活动策划书
2014/01/26 职场文书
2015年端午节活动方案
2015/05/05 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Win11快速关闭所有广告推荐
2022/04/19 数码科技