快捷導(dǎo)航

js下為表格內(nèi)部動(dòng)態(tài)添加行的代碼

更新時(shí)間：2010年06月04日 01:32:09 作者：

最近的一個(gè)項(xiàng)目中在保存表單數(shù)據(jù)時(shí)，要用到一個(gè)動(dòng)態(tài)添加行的功能。平時(shí)動(dòng)態(tài)添加行只是在表格的最下面添加，現(xiàn)在在表格中間動(dòng)態(tài)添加行，而且表格內(nèi)部是包含并且單元格的，其實(shí)很簡(jiǎn)單，下面貼出代碼。

未添加行之前：

添加行之后：

演示代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>給表格內(nèi)部動(dòng)態(tài)添加行</title> <style type="text/css"> .tableStyle { border-collapse: collapse; width:100%; } td { font-size:12px; height:25px; border:1px solid #CCD5E8; } .btn { font-size:12pt; color: #003399; border: 1px #003399 solid; color:#006699; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-color: #e8f4ff; cursor: pointer; font-style: normal ; width:20px; height:22px; font-family:Verdana;font-family:Georgia;_font-family:Tahoma; padding:0 10px 1px;padding:3px 3px 1px;_padding:0 4px 1px; line-height:18px;line-height:14px;_line-height:16px; } </style> </head> <body> <table class="tableStyle" id="OwnershipStructure"> <tr> <td width="15%" rowspan="2" id="StructureLeft1"> 標(biāo)的企業(yè)  股權(quán)結(jié)構(gòu) </td> <td width="15%" rowspan="2" id="StructureLeft2">股東人數(shù)：人 </td> <td width="30%"> 前十名出資人的名稱<strong>（做成動(dòng)態(tài)，填幾個(gè)顯示幾個(gè)）</strong> </td> <td width="30%">出資比例 </td> </tr> <tr id="StructureRight"> <td> <input id="Text1" type="text" /></td> <td> <input id="Text2" type="text" /><input id="btnAddRow" class="btn" onclick="AddStructureRow()" type="button" value="+" /> </td> </tr> <tr> <td>評(píng)估機(jī)構(gòu)</td><td></td><td></td><td></td> </tr> <tr><td>評(píng)估機(jī)構(gòu)</td><td></td><td></td><td></td> </tr> </table>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JS面向?qū)ο缶幊袒A(chǔ)篇（三）繼承操作實(shí)例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊汤^承操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο罄^承的具體概念、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
javascript 兼容FF的onmouseenter和onmouseleave的代碼
經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，例子1 在 ff下抖動(dòng)的厲害，ie下稍微有點(diǎn)。具體原因其實(shí)就是 mouseout 的冒泡機(jī)制引起的。
2008-07-07
HTML頁(yè)面定時(shí)跳轉(zhuǎn)方法解析（2種任選）
本文主要對(duì)HTML頁(yè)面定時(shí)跳轉(zhuǎn)進(jìn)行方法介紹：1、meta refresh 實(shí)現(xiàn)。2、JavaScript 實(shí)現(xiàn)。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
js 將線性數(shù)據(jù)轉(zhuǎn)為樹(shù)形的示例代碼
這篇文章主要介紹了js 將線性數(shù)據(jù)轉(zhuǎn)為樹(shù)形的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
理解javascript async的用法
本篇文章主要介紹了理解javascript async的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
淺談javascript面向?qū)ο蟪绦蛟O(shè)計(jì)
本文主要給大家展示的是javascript面向?qū)ο蟪绦蛟O(shè)計(jì)的相關(guān)資料,需要的朋友可以參考下
2015-01-01
分享一些不常見(jiàn)卻很實(shí)用的JS技巧
有些代碼,需要的時(shí)候能寫(xiě)的出來(lái),但是也需要時(shí)間,如果有的東西長(zhǎng)時(shí)間不接觸,再次看的時(shí)候也會(huì)感覺(jué)很陌生,這篇文章主要給大家介紹了一些不常見(jiàn)卻很實(shí)用的JS技巧,既可以作為一個(gè)知識(shí)的積累,又可以作為閑暇時(shí)打發(fā)時(shí)間寫(xiě)寫(xiě)代碼的記錄,需要的朋友可以參考下
2021-11-11
CKeditor富文本編輯器使用技巧之添加自定義插件的方法
這篇文章主要介紹了CKeditor富文本編輯器使用技巧之添加自定義插件的方法,結(jié)合實(shí)例形式分析了CKeditor添加自定義插件的步驟與相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法,涉及針對(duì)DOM元素操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-12-12