So fügen Sie Tabellenzeilen mit nativen JS- und JQuery_javascript-Kenntnissen dynamisch hinzu und löschen sie-js-Tutorial-php.cn

So fügen Sie Tabellenzeilen mit nativen JS- und JQuery_javascript-Kenntnissen dynamisch hinzu und löschen sie

WBOY

Freigeben： 2016-05-16 15:57:23

Original

1136 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Tabellenzeilen mithilfe von nativem JS und JQuery dynamisch hinzugefügt und gelöscht werden. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die folgenden HTML-Codefunktionen: Senden Sie ein Formular und senden Sie den Wert des Kontrollkästchens (der Wert des Kontrollkästchens entspricht dem folgenden Textfeld, das Kontrollkästchen und das Textfeld befinden sich in derselben Zeile und können sein dynamisch hinzugefügt und gelöscht werden).

Original-JS-Version:

<!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"> 
 /**验证表单复选框是否有选择*/ 
 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); // 删除子节点 
 } 
 /**将文本框值赋给同一行对应的复选框*/ 
 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];// 复选框对象 
   if(valid(obj, obj_chk)){ 
   setValue(obj, obj_chk);// 同一行的文本框值 赋值给 复选框 
   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> 
   允许发送地址 
   <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>

Nach dem Login kopieren

JQuery-Version:

<!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;// 插入行的当前索引 
 /**添加新行*/ 
 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; 
 } 
 /**将文本框值赋给同一行对应的复选框*/ 
 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){ 
  /**判断复选框是否有选*/ 
  if($("input[name='chked']:checked").size() == 0){ 
  alert("选择不能少于一项"); 
  return false; 
  } 
  try { 
  $("tr[id^='tr']").each(function(){ 
   var tmp_row_index = this.id.substring(2); // 当前行索引 
   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> 
   允许发送地址 
   <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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.