動態刪除和新增table行程式碼例項

antzone發表於2017-03-22
行程

table表格是大家都很熟悉的元素，它可以良好的進行組織資料，比較常用的一個形式就是，能夠動態的新增或者刪除單元格，具有較大的靈活性，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var add=document.getElementById("add");
  add.onclick=function(){
    LearnAddSignRow();
  }
}
function LearnAddSignRow(){ 
  var LearnTRLastIndex = findObj("LearnTRLastIndex",document); 
  var rowID = parseInt(LearnTRLastIndex.value); 
 
  var signFrame = findObj("LearnInfoItem",document); 
 
  var newTR = signFrame.insertRow(signFrame.rows.length); 
  newTR.id = "LearnItem" + rowID; 
 
  var newNameTD=newTR.insertCell(0); 
  newNameTD.innerHTML="<input name='txtLearnStartDate" + rowID 
  + "' id='txtLearnStartDate" + rowID 
  + "' type='text' class='inputStyle' />"; 
 
  var newNameTD=newTR.insertCell(1); 
  newNameTD.innerHTML = "<input name='txtName" + rowID 
  + "' id='txtName" + rowID 
  + "' type='text' class='inputStyle' />"; 
 
  var newEmailTD=newTR.insertCell(2); 
  newEmailTD.innerHTML = "<input name='txtEMail" + rowID 
  + "' id='txtEmail" + rowID 
  + "' type='text' class='inputStyle' />"; 
 
  var newTelTD=newTR.insertCell(3); 
  newTelTD.innerHTML = "<input name='txtTel" + rowID 
  + "' id='txtTel" + rowID 
  + "' type='text' class='inputStyle' />"; 
 
  var newMobileTD=newTR.insertCell(4); 
  newMobileTD.innerHTML = "<input name='txtMobile" + rowID 
  + "' id='txtMobile" + rowID 
  + "' type='text' class='inputStyle' />"; 
 
  var newMobileTD=newTR.insertCell(5); 
  newMobileTD.innerHTML = "<input name='txtMobile" 
  + rowID + "' id='txtMobile" 
  + rowID + "' type='text' class='inputStyle' />"; 
 
  var newCompanyTD=newTR.insertCell(6); 
  newCompanyTD.innerHTML = "<input name='txtCompany" 
  + rowID + "' id='txtCompany" 
  + rowID + "' type='text' class='inputStyle' />"; 
 
 
  var newDeleteTD=newTR.insertCell(7); 
  newDeleteTD.innerHTML = "<div align='center'><input id='txtDel" + rowID 
  + "' type='button' value='刪除' onclick=\"LearnDeleteRow('LearnItem" 
  + rowID + "')\" class='inputStyle' /></div>"; 
 
  LearnTRLastIndex.value = (rowID + 1).toString() ; 
} 
 
function findObj(theObj, theDoc){ 
  var p, i, foundObj; 
  if(!theDoc){
    theDoc = document; 
  } 
  if((p = theObj.indexOf("?")) > 0 && parent.frames.length){ 
    theDoc = parent.frames[theObj.substring(p+1)].document; 
    theObj = theObj.substring(0,p); 
  } 
  if(!(foundObj = theDoc[theObj]) && theDoc.all){
    foundObj = theDoc.all[theObj]; 
  } 
   
  for (i=0; !foundObj && i < theDoc.forms.length; i++){
    foundObj = theDoc.forms[i][theObj]; 
  } 
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++){
        foundObj = findObj(theObj,theDoc.layers.document); 
  } 
  if(!foundObj && document.getElementById){
    foundObj = document.getElementById(theObj); 
  } 
  return foundObj; 
}
 
function LearnDeleteRow(rowid){ 
  var signFrame = findObj("LearnInfoItem",document); 
  var signItem = findObj(rowid,document); 
  var rowIndex = signItem.rowIndex; 
  signFrame.deleteRow(rowIndex); 
} 
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" id="LearnInfoItem">
  <tr >
    <td colspan="8" bgcolor="#96E0E2" style="text-align:center;">主要學習簡歷</td>
  </tr>
  <tr id="tr1">
    <td class="tdStyle2">起訖時間 </td>
    <td class="tdStyle2">畢業院校</td>
    <td class="tdStyle2">所學專業</td>
    <td class="tdStyle2">學制</td>
    <td class="tdStyle2">學位</td>
    <td class="tdStyle2">學習方式</td>
    <td class="tdStyle2">文化程度</td>
    <td class="tdStyle2">
      <input type="button" id="add" name="LearnAdd" value="新增" />
      <input name='LearnTRLastIndex' type='hidden' id='LearnTRLastIndex' value="1" />
    </td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了我們的要求，能夠動態的新增一行，並且新增加的行具有刪除按鈕，點選刪除按鈕可以刪除當前行，下面介紹一下它的實現過程。

相關文章