欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS和JQuery動態(tài)添加、刪除表格行的方法

 更新時間：2015年05月28日 15:30:56   作者：jayqean  
這篇文章主要介紹了原生JS和JQuery動態(tài)添加、刪除表格行的方法,涉及javascript針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下

本文實例講述了原生JS和JQuery動態(tài)添加、刪除表格行的方法。分享給大家供大家參考。具體分析如下：

下面HTML代碼作用：提交一個表單，將復(fù)選框的值提交（復(fù)選框的值等于后面的文本框，復(fù)選框和文本框處在同一行，可以動態(tài)添加和刪除）。

原生態(tài)JS版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript添加行demo</title>
 <script type="text/javascript"> 
 /**驗證表單復(fù)選框是否有選擇*/ 
 function isValidChkSelect(frm){ 
  var chk = frm.chked; 
  if(chk == undefined){ 
  return; 
  } 
  var len = frm.chked.length; 
  if(chk.length == undefined){ 
  // 只有一個checkbox 
  if (chk.checked == true) { 
   return true; 
  } 
  } else { 
  for(var i = 0; i < chk.length; i++) { 
   if (chk[i].checked == true) { 
   return true; 
   } 
  } 
  } 
  return false; 
 } 
 /**選擇所有文本框*/ 
 function selectAll(frm){ 
  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("tbl"); 
  var index = objMyTable.rows.length - 1; 
  var nextRow = objMyTable.insertRow(index);// 插入新行 
  var objCel_0 = nextRow.insertCell(0);// 添加單元格 
  objCel_0.innerHTML = "<input type='checkbox' name='chked' value='' />"; 
  var objCel_1 = nextRow.insertCell(1); 
  // nextRow.rowIndex -- 行索引 
  objCel_1.innerHTML = "<input type='text' name='newRow"+nextRow.rowIndex+"' /> <a href='#' onclick='delRow(this)'>刪除</a>"; 
 } 
 /**刪除行對象*/ 
 function delRow(obj){ 
  //obj.parentNode.parentNode.removeNode(true); // Firefox不兼容 
  var new_tr = obj.parentNode.parentNode; 
  var tmp = new_tr.parentNode; 
  tmp.removeChild(new_tr); // 刪除子節(jié)點 
 } 
 /**將文本框值賦給同一行對應(yīng)的復(fù)選框*/ 
 function setValue(obj, obj_chk){ 
  obj_chk.value = obj.value; 
 } 
 function doSubmit(frm){ 
  if(isValidChkSelect(frm) == false){ 
  alert("選擇不能少于一項"); 
  return false; 
  } 
  for(var i = 0; i < document.getElementsByTagName("input").length; i++) { 
  var obj = document.getElementsByTagName("input")[i]; 
  if(obj.type == "text" && obj.name.substring(0, 6) == "newRow"){ 
   var obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 復(fù)選框?qū)ο?
   if(valid(obj, obj_chk)){ 
   setValue(obj, obj_chk);// 同一行的文本框值 賦值給 復(fù)選框 
   continue; 
   } else { 
   return false; 
   } 
  } 
  } 
  return true; 
 } 
 function valid(obj, obj_chk){ 
  if(obj_chk.checked){ 
  var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
  if(obj.value == ""){ 
   alert("添加的地址不能為空！"); 
   return false; 
  } 
  if(!patrn.test(obj.value)){ 
   alert("請輸入正確的郵件地址！"); 
   return false; 
  } 
  } 
  return true; 
 } 
 </script> 
</head> 
<body> 
 <form method="post" action="" onsubmit="return doSubmit(this)"> 
 <table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%"> 
  <tr> 
  <td><input type="checkbox" name='chkall' onclick="selectAll(this.form)"/>全部選擇</td> 
  <td> 
   允許發(fā)送地址 
   <a href="#" onclick="addNew()">添加新地址</a> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   <input type="checkbox" name="chked" value="mailfrom@gmail.com"> 
  </td> 
  <td>mailfrom@gmail.com</td> 
  </tr> 
  <tr> 
  <td colspan="2"> 
   <input type="submit" value="提交" name="B1"> 
  </td> 
  </tr> 
 </table> 
 </form> 
</body> 
</html>

JQuery版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery添加行demo</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
 $("document").ready(function(){ 
  // 全部選擇的點擊事件 
  $("input[name='chkall']").click(function(){ 
  $("input[name='chked']").attr("checked", this.checked); 
  }); 
 }); 
 var row_cur_index = 0;// 插入行的當(dāng)前索引 
 /**添加新行*/ 
 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("+row_id+")'>刪除</a></td></tr>"; 
  $("#topRow").before(row_obj); // 插入行 
  row_cur_index = row_cur_index + 1; 
 } 
 /**將文本框值賦給同一行對應(yīng)的復(fù)選框*/ 
 function setValue(row_index, value){ 
  var row_id = "#tr" + row_index; 
  $(row_id).find(":checked").val(value); 
 } 
 /**刪除行對象*/ 
 function delRow(row_id){ 
  $(row_id).remove(); // 刪除匹配row_id的元素 
 } 
 function doSubmit(frm){ 
  /**判斷復(fù)選框是否有選*/ 
  if($("input[name='chked']:checked").size() == 0){ 
  alert("選擇不能少于一項"); 
  return false; 
  } 
  try { 
  $("tr[id^='tr']").each(function(){ 
   var tmp_row_index = this.id.substring(2); // 當(dāng)前行索引 
   if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){ 
   var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
   var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值 
   setValue(tmp_row_index, this.value);  
   if(input_value == "") throw "Err1"; 
   if (!patrn.test(input_value)) throw "Err2"; 
   } 
  }); 
  } catch (e) { 
   if(e == "Err1") 
   alert("添加的地址不能為空！"); 
  if(e == "Err2") 
   alert("請輸入正確的郵件地址！");  
   return false; 
  } 
  return true; 
 } 
 </script> 
</head> 
<body> 
 <form method="post" action="" onsubmit="return doSubmit(this)"> 
 <table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%"> 
  <tr> 
  <td><input type="checkbox" name='chkall' />全部選擇</td> 
  <td> 
   允許發(fā)送地址 
   <a href="#" onclick="addNew()">添加新地址</a> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   <input type="checkbox" name="chked" value="mailfrom@gmail.com"> 
  </td> 
  <td>mailfrom@gmail.com</td> 
  </tr> 
  <tr id="topRow"> 
  <td colspan="2"> 
   <input type="submit" value="提交" name="B1"> 
  </td> 
  </tr> 
 </table> 
 </form> 
</body> 
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

相關(guān)文章

  • 超精準(zhǔn)的javascript驗證身份證號的方法

    超精準(zhǔn)的javascript驗證身份證號的方法

    這篇文章為大家分享了一個超精準(zhǔn)的javascript驗證身份證號的具體實現(xiàn)方法，根據(jù)身份證號對其進行性別的判定，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 微信小程序?qū)崿F(xiàn)人臉識別登陸的示例代碼

    微信小程序?qū)崿F(xiàn)人臉識別登陸的示例代碼

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識別登陸的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 利用MutationObserver實現(xiàn)計算首屏?xí)r間

    利用MutationObserver實現(xiàn)計算首屏?xí)r間

    在前端開發(fā)中，優(yōu)化頁面性能是至關(guān)重要的，計算首屏?xí)r間是衡量網(wǎng)頁性能的重要指標(biāo)，本文將介紹如何使用MutationObserver來獲取首屏?xí)r間的最佳實踐，感興趣的可以了解下
    2023-07-07
  • 小程序?qū)崿F(xiàn)上傳視頻功能

    小程序?qū)崿F(xiàn)上傳視頻功能

    這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • three.js中3D視野的縮放實現(xiàn)代碼

    three.js中3D視野的縮放實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了three.js中3D視野的縮放實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • 寫的一段拖動對象的代碼

    寫的一段拖動對象的代碼

    寫的一段拖動對象的代碼...
    2007-01-01
  • js實現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博

    js實現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博

    這篇文章主要介紹了js實現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博,需要的朋友可以參考下
    2015-12-12
  • JavaScript實現(xiàn)緩動動畫

    JavaScript實現(xiàn)緩動動畫

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)緩動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • 基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布

    基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布

    本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識，本文介紹的非常詳細，具有參考價值，感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • JavaScript Serializer序列化時間處理示例

    JavaScript Serializer序列化時間處理示例

    JavaScriptSerializer序列化時間后會把時間序列化成N進制的鬼數(shù)據(jù) ，下面有個示例，需要的朋友可以了解下
    2014-07-07

最新評論