使用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 replace方法去空格
May 08 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
html中两种获取标签内的值的方法
Jun 16 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使用MySQL保存session会话的方法
2015/06/26 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python编程羊车门问题代码示例
2017/10/25 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
应届大学生自荐信格式
2013/09/21 职场文书
感恩教育活动总结
2014/05/05 职场文书
七一建党日演讲稿
2014/09/05 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
公司离职证明范本
2014/10/17 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL