快捷導(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í)很簡單，下面貼出代碼。

未添加行之前：

添加行之后：

演示代碼:

<!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>評估機(jī)構(gòu)</td><td></td><td></td><td></td> </tr> <tr><td>評估機(jī)構(gòu)</td><td></td><td></td><td></td> </tr> </table>  </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

原生javascript實(shí)現(xiàn)簡單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實(shí)現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下
2015-01-01
純js的右下角彈窗實(shí)例
下面小編就為大家?guī)硪黄僯s的右下角彈窗實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
Javascript同時(shí)聲明一連串（多個(gè)）變量的方法
這篇文章主要給大家介紹了利用Javascript聲明一連串（也就是多個(gè)）變量的方法，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
ajax跨域調(diào)用webservice的實(shí)現(xiàn)代碼
這篇文章主要介紹了 ajax跨域調(diào)用webservice服務(wù)例子和理解，最近ajax訪問webservice遇到跨域的問題，網(wǎng)上搜索資料，總結(jié)如下
2016-05-05
JS根據(jù)變量保存方法名并執(zhí)行方法示例
用eval方法，把傳進(jìn)來的這個(gè)方法名所代表的方法當(dāng)作一個(gè)對象來賦值給method1的func屬性,需要的朋友可以參考下
2014-04-04
利用JS判斷用戶是否上網(wǎng)(連接網(wǎng)絡(luò))
本篇文章主要介紹了利用JS判斷用戶是否上網(wǎng)(連接網(wǎng)絡(luò))。需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
談一談bootstrap響應(yīng)式布局
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下
2016-05-05
js獲取Element元素的四種常用方法
本文主要介紹了js獲取Element元素的四種常用方法,通過介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過不同的方式獲取頁面中的元素,感興趣的可以了解一下
2023-08-08
TypeScript裝飾器之項(xiàng)目數(shù)據(jù)轉(zhuǎn)換詳解
這篇文章主要為大家詳細(xì)介紹了TypeScript項(xiàng)目中是如何進(jìn)行數(shù)據(jù)轉(zhuǎn)換的,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
JavaScript數(shù)組的定義及數(shù)字操作技巧
這篇文章主要介紹了JavaScript數(shù)組的定義及數(shù)字操作技巧的相關(guān)資料,需要的朋友可以參考下
2016-06-06