欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Js實現(xiàn)動態(tài)添加刪除Table行示例

 更新時間:2014年04月14日 15:07:04   作者:  
這篇文章主要介紹了Js動態(tài)添加刪除Table行的具體實現(xiàn),需要的朋友可以參考下
最近做項目遇到要動態(tài)添加、刪除表格行的操作,實現(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)效果:

相關(guān)文章

  • element el-input 刪除邊框的實現(xiàn)

    element el-input 刪除邊框的實現(xiàn)

    本文主要介紹了element el-input 刪除邊框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Web技術(shù)實現(xiàn)移動監(jiān)測的介紹

    Web技術(shù)實現(xiàn)移動監(jiān)測的介紹

    移動偵測,一般也叫運動檢測,常用于無人值守監(jiān)控錄像和自動報警。通過攝像頭按照不同幀率采集得到的圖像會被 CPU 按照一定算法進行計算和比較,當(dāng)畫面有變化時,如有人走過,鏡頭被移動,計算比較結(jié)果得出的數(shù)字會超過閾值并指示系統(tǒng)能自動作出相應(yīng)的處理
    2017-09-09
  • canvas簡單快速的實現(xiàn)知乎登錄頁背景效果

    canvas簡單快速的實現(xiàn)知乎登錄頁背景效果

    本篇文章主要介紹了canvas簡單快速實現(xiàn)知乎登錄頁背景效果的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • JavaScript使用pop方法移除數(shù)組最后一個元素用法實例

    JavaScript使用pop方法移除數(shù)組最后一個元素用法實例

    這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個元素,實例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下
    2015-04-04
  • Webpack實現(xiàn)多頁面打包的方法步驟

    Webpack實現(xiàn)多頁面打包的方法步驟

    本文主要介紹了Webpack實現(xiàn)多頁面打包的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法

    JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法

    下面小編就為大家?guī)硪黄狫S判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • JavaScript實現(xiàn)Tab點擊切換

    JavaScript實現(xiàn)Tab點擊切換

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab點擊切換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 關(guān)于恒等于(===)和非恒等于(!==)

    關(guān)于恒等于(===)和非恒等于(!==)

    關(guān)于恒等于(===)和非恒等于(!==)...
    2007-08-08
  • 微信小程序?qū)崿F(xiàn)單選功能

    微信小程序?qū)崿F(xiàn)單選功能

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)單選功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-10-10
  • js實現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄

    js實現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄

    這篇文章主要給大家介紹了關(guān)于js實現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實現(xiàn)所需要的功能,需要的朋友可以參考下
    2021-06-06

最新評論