js制作动态创建table行与修改等编辑表单功能特效

最新推荐文章于 2024-07-03 11:52:14 发布

zyu67

最新推荐文章于 2024-07-03 11:52:14 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/zyu67/article/details/44514565

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

 
  <script type= 
  "text/javascript" 
  > 
 
  //Create TR 
 
  var  
  nName =  
  new  
  Array( 
  "Tony" 
  , 
  "Mika" 
  , 
  "Neo" 
  , 
  "Oi" 
  , 
  "Kim" 
  , 
  "Park" 
  , 
  "Mr Lee" 
  , 
  "Tasky" 
  , 
  "Saco" 
  , 
  "Novel" 
  ); 
 
  var  
  nSex =  
  new  
  Array( 
  "男性" 
  , 
  "女性" 
  , 
  "保密" 
  ); 
 
  var  
  i = 1; 
 
  function  
  CreateTB(){ 
 
  var  
  oTB = document.getElementById( 
  "TB" 
  ); 
 
  var  
  oTR = oTB.insertRow(oTB.rows.length); 
 
  var  
  oTD1 = oTR.insertCell(0); 
 
  oTD1.innerHTML =  
  "<input type='checkbox' name='ck'>" 
  ; 
 
  var  
  oTD2 = oTR.insertCell(1); 
 
  oTD2.innerHTML =  
  "<div>"  
  + nName[parseInt(Math.random()*10)] +  
  "</div><center><input type='text' style='display:none; width:99%; height:22px; text-align:center;'></center>" 
  ; 
 
  var  
  oTD3 = oTR.insertCell(2); 
 
  oTD3.innerHTML =  
  "<div>"  
  + parseInt(Math.random()*50+15) +  
  "</div><center><select name='age' class='select' style='display:none;'></select></center>" 
  ; 
 
  var  
  oTD4 = oTR.insertCell(3); 
 
  oTD4.innerHTML =  
  "<div>"  
  + nSex[parseInt(Math.random()*3)] +  
  "</div><center><select name='sex' class='select' style='display:none;'></select></center>" 
  ; 
 
  var  
  oTD5 = oTR.insertCell(4); 
 
  oTD5.innerHTML =  
  "<input type='button' value='修改' onclick=\"edit(this,'show')\"><input type='button' value='删除' onclick='del(this)'>" 
  ; 
 
  i++; 
 
  } 
 
  //EDIT TR 
 
  function  
  edit(o,otype){ 
 
  var  
  oTR=o.parentNode.parentNode; 
 
  var  
  oDiv1=oTR.cells[1].getElementsByTagName( 
  "div" 
  ); 
 
  var  
  oDiv2=oTR.cells[2].getElementsByTagName( 
  "div" 
  ); 
 
  var  
  oDiv3=oTR.cells[3].getElementsByTagName( 
  "div" 
  ); 
 
  var  
  oInpt1=oTR.cells[1].getElementsByTagName( 
  "input" 
  ); 
 
  var  
  oselect2=oTR.cells[2].getElementsByTagName( 
  "select" 
  ); 
 
  var  
  oselect3=oTR.cells[3].getElementsByTagName( 
  "select" 
  ); 
 
  if  
  (otype == 
  "show" 
  ){ 
 
  o.value= 
  "确认" 
  ; 
 
  o.setAttribute( 
  "onclick" 
  , 
  "edit(this,'hide')" 
  ); 
 
  //名字修改前 
 
  oInpt1[0].value = oDiv1[0].childNodes[0].nodeValue; 
 
  oInpt1[0].style.display =  
  "block" 
  ; 
 
  oDiv1[0].style.display =  
  "none" 
  ; 
 
  //年龄修改前 
 
  oDiv2[0].style.display =  
  "none" 
  ; 
 
  var  
  iSage = parseInt(oDiv2[0].childNodes[0].nodeValue); 
 
  oselect2[0].style.display =  
  "block" 
  ; 
 
  if  
  (oselect2[0].length == 0){ 
 
  for  
  ( 
  var  
  i=0; i<50; i++){ 
 
  oselect2[0].options.add( 
  new  
  Option(i+15,i+15));  
 
  } 
 
  oselect2[0].options[iSage-15].selected =  
  true 
  ; 
 
  } 
 
  //性别修改前 
 
  oDiv3[0].style.display =  
  "none" 
  ; 
 
  oselect3[0].style.display =  
  "block" 
  ; 
 
  if  
  (oselect3[0].length == 0){ 
 
  for  
  ( 
  var  
  i=0; i<nSex.length; i++){ 
 
  oselect3[0].add( 
  new  
  Option(nSex[i],i)); 
 
  } 
 
  switch  
  (oDiv3[0].childNodes[0].nodeValue){ 
 
  case  
  '男性' 
  : 
 
  var  
  iSno = 0; 
 
  break 
  ; 
 
  case  
  '女性' 
  : 
 
  var  
  iSno = 1; 
 
  break 
  ; 
 
  case  
  '保密' 
  : 
 
  var  
  iSno = 2; 
 
  break 
  ; 
 
  } 
 
  oselect3[0].options[iSno].selected =  
  true 
  ; 
 
  } 
 
  } 
  else  
  if  
  (otype == 
  "hide" 
  ){ 
 
  o.value= 
  "修改" 
  ; 
 
  o.setAttribute( 
  "onclick" 
  , 
  "edit(this,'show')" 
  ); 
 
  //名字修改后 
 
  oDiv1[0].childNodes[0].nodeValue = oInpt1[0].value; 
 
  oDiv1[0].style.display =  
  "block" 
  ; 
 
  oInpt1[0].style.display =  
  "none" 
  ; 
 
  //年龄修改后 
 
  oDiv2[0].childNodes[0].nodeValue = oselect2[0].value; 
 
  oDiv2[0].style.display =  
  "block" 
  ; 
 
  oselect2[0].style.display =  
  "none" 
  ; 
 
  //性别修改后 
 
  oDiv3[0].childNodes[0].nodeValue = nSex[oselect3[0].value]; 
 
  oDiv3[0].style.display =  
  "block" 
  ; 
 
  oselect3[0].style.display =  
  "none" 
  ; 
 
  } 
 
  } 
 
  //Delete TR 
 
  function  
  del(o){ 
 
  var  
  oTB = document.getElementById( 
  "TB" 
  ); 
 
  var  
  oInpt = oTB.getElementsByTagName( 
  "input" 
  ); 
 
  if  
  (o ==  
  'chk' 
  ) 
 
  { 
 
  for  
  ( 
  var  
  i=1; i<oInpt.length ; i++) 
 
  { 
 
  if  
  (oInpt[i].type ==  
  'checkbox'  
  && oInpt[i].checked) 
 
  { 
 
  var  
  oRow = oInpt[i].parentNode.parentNode.sectionRowIndex; 
 
  oTB.deleteRow(oRow); 
 
  i--; 
 
  } 
 
  } 
 
  } 
  else 
  { 
 
  var  
  oDel = o.parentNode.parentNode.sectionRowIndex; 
 
  oTB.deleteRow(oDel); 
 
  } 
 
  } 
 
  //Check All 
 
  function  
  chk(type,o){ 
 
  var  
  oInpt = document.getElementsByTagName( 
  "input" 
  ); 
 
  for  
  ( 
  var  
  i=0; i<oInpt.length; i++){ 
 
  if  
  (oInpt[i].type ==  
  "checkbox" 
  ){ 
 
  oInpt[i].checked = o.checked; 
 
  } 
 
  } 
 
  } 
 
  //Check Fan 
 
  function  
  chkFun(){ 
 
  var  
  oTB = document.getElementById( 
  "TB" 
  ); 
 
  var  
  oInpt = oTB.getElementsByTagName( 
  "input" 
  ); 
 
  for  
  ( 
  var  
  i=1; i<oInpt.length; i++){ 
 
  if  
  (oInpt[i].type ==  
  "checkbox" 
  ){ 
 
  if  
  (oInpt[i].checked) 
 
  { 
 
  oInpt[i].checked =  
  false 
  ; 
 
  } 
  else 
  { 
 
  oInpt[i].checked =  
  true 
  ; 
 
  } 
 
  } 
 
  } 
 
  } 
 
  </script>
 
 下载源码