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

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