首页登陆欢迎您!
首页登陆 > 运维知识 > 原生JS和JQuery动态添加、删除表格行的方法_javascript技巧_脚本之家

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧_脚本之家

时间:2019-12-06

本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下:

下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除)。

javascript添加行demo  /**验证表单复选框是否有选择*/ function isValidChkSelect{ var chk = frm.chked; if{ return; } var len = frm.chked.length; if(chk.length == undefined){ // 只有一个checkbox if  { return true; } } else { for(var i = 0; i < chk.length; i++) { if (chk[i].checked == true) { return true; } } } return false; } /**选择所有文本框*/ function selectAll{ for (var i = 0; i < frm.elements.length; i++){ var e = frm.elements[i]; if (e.name != 'chkall' && e.type == 'checkbox') e.checked = frm.chkall.checked; } } /**添加新行*/ function addNew(){ var objMyTable = document.getElementById; var index = objMyTable.rows.length - 1; var nextRow = objMyTable.insertRow;// 插入新行 var objCel_0 = nextRow.insertCell;// 添加单元格 objCel_0.innerHTML = "<input type='checkbox' name='chked' value='' />"; var objCel_1 = nextRow.insertCell; // nextRow.rowIndex -- 行索引 objCel_1.innerHTML = "<input type='text' name='newRow"+nextRow.rowIndex+"' /> <a href='#' onclick='delRow'>删除</a>"; } /**删除行对象*/ function delRow{ //obj.parentNode.parentNode.removeNode; // Firefox不兼容 var new_tr = obj.parentNode.parentNode; var tmp = new_tr.parentNode; tmp.removeChild; // 删除子节点 } /**将文本框值赋给同一行对应的复选框*/ function setValue{ obj_chk.value = obj.value; } function doSubmit{ if == false){ alert; return false; } for(var i = 0; i < document.getElementsByTagName { var obj = document.getElementsByTagName[i]; if(obj.type == "text" && obj.name.substring{ var obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 复选框对象 if{ setValue;// 同一行的文本框值 赋值给 复选框 continue; } else { return false; } } } return true; } function valid{ if{ var patrn = /^w+*@w+*.w+*$/; if{ alert; return false; } if(!patrn.test{ alert; return false; } } return true; }     

jQuery添加行demo  $.ready{ // 全部选择的点击事件 $("input[name='chkall']").click{ $("input[name='chked']").attr("checked", this.checked); }); }); var row_cur_index = 0;// 插入行的当前索引 /**添加新行*/ function addNew(){ var row_id = "tr" + row_cur_index;// 所插入行的id var row_obj = "<tr id='"+row_id+"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"+row_cur_index+"' /> <a href='#' onclick='delRow'>删除</a></td></tr>"; $.before; // 插入行 row_cur_index = row_cur_index + 1; } /**将文本框值赋给同一行对应的复选框*/ function setValue{ var row_id = "#tr" + row_index; $.find.val; } /**删除行对象*/ function delRow.remove(); // 删除匹配row_id的元素 } function doSubmit{ /**判断复选框是否有选*/ if($("input[name='chked']:checked").size{ alert; return false; } try { $.each{ var tmp_row_index = this.id.substring; // 当前行索引 if($.find.attr{ var patrn = /^w+*@w+*.w+*$/; var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值 setValue(tmp_row_index, this.value); if throw "Err1"; if (!patrn.test throw "Err2"; } }); } catch  alert; if alert; return false; } return true; }     

希望本文所述对大家的javascript程序设计有所帮助。

上一篇:多种js图片预加载实现方式分享,js图片加载分享 下一篇:没有了