ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルの下でテーブル内に動的に行を追加するコード

js_javascript スキルの下でテーブル内に動的に行を追加するコード

WBOYオリジナル: 2016-05-16 18:25:491138ブラウズ

行追加前:
js_javascript スキルの下でテーブル内に動的に行を追加するコード
行追加後:

デモコード:

<title>テーブル内に行を動的に追加します</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>

<table class="tableStyle" id="OwnershipStructure"> 
<tr> 
<td width="15%" rowspan="2" id="StructureLeft1"> 
标的企业 
 
股权结构 </td> 
<td width="15%" rowspan="2" id="StructureLeft2">股东人数：人 </td> 
<td width="30%"> 
前十名出资人的名称<strong>（做成动态，填几个显示几个）</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>评估机构</td>
<td></td>
<td></td>
<td></td> 
</tr> 
<tr>
<td>评估机构</td>
<td></td>
<td></td>
<td></td> 
</tr> 
</table>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Jquery を新しい version_jquery にアップグレードした後のセレクターに関する構文の問題次の記事：Jquery を新しい version_jquery にアップグレードした後のセレクターに関する構文の問題

続きを見る

js_javascript スキルの下でテーブル内に動的に行を追加するコード

関連記事