Js實現(xiàn)動態(tài)添加刪除Table行示例
更新時間:2014年04月14日 15:07:04 作者:
這篇文章主要介紹了Js動態(tài)添加刪除Table行的具體實現(xiàn),需要的朋友可以參考下
最近做項目遇到要動態(tài)添加、刪除表格行的操作,實現(xiàn)如下
html代碼
<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem">
<tr >
<td colspan="8" bgcolor="#96E0E2" style="height:30px;" ><h3 style="text-align:center; margin:0;">主要學(xué)習(xí)簡歷</h3></td>
</tr>
<tr id="tr1">
<td class="tdStyle2">起訖時間 </td>
<td class="tdStyle2">畢業(yè)院校</td>
<td class="tdStyle2">所學(xué)專業(yè)</td>
<td class="tdStyle2">學(xué)制</td>
<td class="tdStyle2">學(xué)位</td>
<td class="tdStyle2">學(xué)習(xí)方式</td>
<td class="tdStyle2">文化程度</td>
<td class="tdStyle2">
<input type="button" name="LearnAdd" value="添加" onclick="LearnAddSignRow()" />
<input name='LearnTRLastIndex' type='hidden' id='LearnTRLastIndex' value="1" />
</td>
</tr>
</table>
javascript代碼:
<script language="javascript" type="text/javascript">// Example: obj = findObj("image1");
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[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
//添加一行學(xué)習(xí)簡歷
function LearnAddSignRow(){ //讀取最后一行的行號,存放在LearnTRLastIndex文本框中
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);
//添加列內(nèi)容
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />";
//添加列:畢業(yè)院校
var newNameTD=newTR.insertCell(1);
//添加列內(nèi)容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />";
//添加列:所學(xué)專業(yè)
var newEmailTD=newTR.insertCell(2);
//添加列內(nèi)容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)制
var newTelTD=newTR.insertCell(3);
//添加列內(nèi)容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)位
var newMobileTD=newTR.insertCell(4);
//添加列內(nèi)容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)習(xí)方式
var newMobileTD=newTR.insertCell(5);
//添加列內(nèi)容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";
//添加列:文化程度
var newCompanyTD=newTR.insertCell(6);
//添加列內(nèi)容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' class='inputStyle' />";
//添加列:刪除按鈕
var newDeleteTD=newTR.insertCell(7);
//添加列內(nèi)容
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 LearnDeleteRow(rowid){
var signFrame = findObj("LearnInfoItem",document);
var signItem = findObj(rowid,document);
//獲取將要刪除的行的Index
var rowIndex = signItem.rowIndex;
//刪除指定Index的行
signFrame.deleteRow(rowIndex);
}
}
</script>
實現(xiàn)效果:
html代碼
復(fù)制代碼 代碼如下:
<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem">
<tr >
<td colspan="8" bgcolor="#96E0E2" style="height:30px;" ><h3 style="text-align:center; margin:0;">主要學(xué)習(xí)簡歷</h3></td>
</tr>
<tr id="tr1">
<td class="tdStyle2">起訖時間 </td>
<td class="tdStyle2">畢業(yè)院校</td>
<td class="tdStyle2">所學(xué)專業(yè)</td>
<td class="tdStyle2">學(xué)制</td>
<td class="tdStyle2">學(xué)位</td>
<td class="tdStyle2">學(xué)習(xí)方式</td>
<td class="tdStyle2">文化程度</td>
<td class="tdStyle2">
<input type="button" name="LearnAdd" value="添加" onclick="LearnAddSignRow()" />
<input name='LearnTRLastIndex' type='hidden' id='LearnTRLastIndex' value="1" />
</td>
</tr>
</table>
javascript代碼:
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">// Example: obj = findObj("image1");
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[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
//添加一行學(xué)習(xí)簡歷
function LearnAddSignRow(){ //讀取最后一行的行號,存放在LearnTRLastIndex文本框中
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);
//添加列內(nèi)容
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />";
//添加列:畢業(yè)院校
var newNameTD=newTR.insertCell(1);
//添加列內(nèi)容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />";
//添加列:所學(xué)專業(yè)
var newEmailTD=newTR.insertCell(2);
//添加列內(nèi)容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)制
var newTelTD=newTR.insertCell(3);
//添加列內(nèi)容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)位
var newMobileTD=newTR.insertCell(4);
//添加列內(nèi)容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";
//添加列:學(xué)習(xí)方式
var newMobileTD=newTR.insertCell(5);
//添加列內(nèi)容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />";
//添加列:文化程度
var newCompanyTD=newTR.insertCell(6);
//添加列內(nèi)容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' class='inputStyle' />";
//添加列:刪除按鈕
var newDeleteTD=newTR.insertCell(7);
//添加列內(nèi)容
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 LearnDeleteRow(rowid){
var signFrame = findObj("LearnInfoItem",document);
var signItem = findObj(rowid,document);
//獲取將要刪除的行的Index
var rowIndex = signItem.rowIndex;
//刪除指定Index的行
signFrame.deleteRow(rowIndex);
}
}
</script>
實現(xiàn)效果:

您可能感興趣的文章:
- JS 排序輸出實現(xiàn)table行號自增前端動態(tài)生成的tr
- JS動態(tài)添加Table的TR,TD實現(xiàn)方法
- JavaScript如何動態(tài)創(chuàng)建table表格
- js動態(tài)給table添加/刪除tr的方法
- JS動態(tài)創(chuàng)建Table,Tr,Td并賦值的具體實現(xiàn)
- js實現(xiàn)對table動態(tài)添加、刪除和更新的方法
- JS實現(xiàn)動態(tài)修改table及合并單元格的方法示例
- jQuery+json實現(xiàn)動態(tài)創(chuàng)建復(fù)雜表格table的方法
- javascript DOM操作之動態(tài)刪除TABLE多行
- JS實現(xiàn)動態(tài)生成html table表格的方法分析
相關(guān)文章
element el-input 刪除邊框的實現(xiàn)
本文主要介紹了element el-input 刪除邊框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Web技術(shù)實現(xiàn)移動監(jiān)測的介紹
移動偵測,一般也叫運動檢測,常用于無人值守監(jiān)控錄像和自動報警。通過攝像頭按照不同幀率采集得到的圖像會被 CPU 按照一定算法進行計算和比較,當(dāng)畫面有變化時,如有人走過,鏡頭被移動,計算比較結(jié)果得出的數(shù)字會超過閾值并指示系統(tǒng)能自動作出相應(yīng)的處理2017-09-09JavaScript使用pop方法移除數(shù)組最后一個元素用法實例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個元素,實例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下2015-04-04JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法
下面小編就為大家?guī)硪黄狫S判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02