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;">主要學習簡歷</h3></td>
</tr>
<tr id="tr1">
<td class="tdStyle2">起訖時間 </td>
<td class="tdStyle2">畢業(yè)院校</td>
<td class="tdStyle2">所學專業(yè)</td>
<td class="tdStyle2">學制</td>
<td class="tdStyle2">學位</td>
<td class="tdStyle2">學習方式</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;
}
//添加一行學習簡歷
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);
//添加列內容
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />";
//添加列:畢業(yè)院校
var newNameTD=newTR.insertCell(1);
//添加列內容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />";
//添加列:所學專業(yè)
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 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代碼
復制代碼 代碼如下:
<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;">主要學習簡歷</h3></td>
</tr>
<tr id="tr1">
<td class="tdStyle2">起訖時間 </td>
<td class="tdStyle2">畢業(yè)院校</td>
<td class="tdStyle2">所學專業(yè)</td>
<td class="tdStyle2">學制</td>
<td class="tdStyle2">學位</td>
<td class="tdStyle2">學習方式</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;
}
//添加一行學習簡歷
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);
//添加列內容
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />";
//添加列:畢業(yè)院校
var newNameTD=newTR.insertCell(1);
//添加列內容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />";
//添加列:所學專業(yè)
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 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)建復雜表格table的方法
- javascript DOM操作之動態(tài)刪除TABLE多行
- JS實現(xiàn)動態(tài)生成html table表格的方法分析
相關文章
element el-input 刪除邊框的實現(xiàn)
本文主要介紹了element el-input 刪除邊框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04JavaScript使用pop方法移除數(shù)組最后一個元素用法實例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個元素,實例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下2015-04-04JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法
下面小編就為大家?guī)硪黄狫S判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02