jqueryはスタイル付きのHTMLタグを追加します

今回は、jquery でスタイル付き HTML タグを追加する方法を説明します。 jquery でスタイル付き HTML タグを追加する場合の 注意事項 は何ですか?実際のケースを見てみましょう。

は次のとおりです:

<table class="exhibit_table" style="font-size:13px; text-align:left;"> 
 <tr> 
  <td style="width:80px;" align="right">上传计划单</td> 
  <td style="padding:10px;"><input type="file" name="file" style="display:inline; width:180px;"/>
  <button type="button" class="btn btn-success btn-xs" style="border-radius:4px; margin-top:-5px; margin-left:-4px;" onclick="plusFile()">
<i class="icon-plus icon-on-right bigger-110"></i>添加
</button>
</td>   
 </tr> 
 <tr> 
 <td></td>
 <td style="padding:10px;"><p id="otherFile"></p></td>
</tr>
</table>

実現したい機能は次のとおりです: [追加]ボタンをクリックすると、アップロードプランの下にプランをアップロードするための別の

ファイルアップロードフォームを追加し、 new ファイルアップロードフォームの後ろに「削除」ボタンがあります。 「削除」ボタンをクリックすると、新しく追加したファイルアップロードフォームを削除できます。

「追加」ボタンをクリックすると、添付ファイルをアップロードするためのフォームと削除ボタンを追加できます

「削除」ボタンをクリックすると、新しく追加された添付ファイルをアップロードするためのフォームと削除ボタンが一緒に削除されます

上記の効果を実現するコードは次のとおりです: クリック イベントを「追加」ボタンにバインドします: onclick="plusFile()" 「追加」ボタンがクリックされると、plusFile() 関数がトリガーされます。この関数の機能は次のとおりです。まず $("#otherFile") を通じて ID が otherFile である p を取得し、次に jquery の append 関数を通じてこの p に HTML 要素を追加します。追加される HTML 要素は次のとおりです。

関数コードは次のとおりです。表示:

<p style=&#39;margin-top:-2px;&#39;>
<input type=&#39;file&#39; name=&#39;file&#39; style=&#39;display:inline; width:180px;&#39;/>
<button type=&#39;button&#39; class=&#39;btn btn-danger btn-xs&#39; style=&#39;border-radius:4px; margin-top:-5px;&#39; onclick=&#39;deleteCurrent(this)&#39;>
<i class=&#39;icon-trash icon-on-right bigger-110&#39;></i>删除
</button>
</p>

次に、クリック イベントを「削除」ボタンにバインドします: onclick='deleteCurrent(this)' 「削除」ボタンがクリックされると、deleteCurrent(this) 関数が実行されます。引き起こされる。この関数の機能は、まず this によって渡されたパラメータを受け取り、次に $(obj) を通じて「削除」ボタンが配置されているオブジェクトを取得し、次に $(obj) を通じて「削除」ボタンの親要素を取得します。 .parent()、つまり < ;p>新しく追加された要素は、最終的に jquery の remove() 関数によって削除されます。

関数コードは次のとおりです:

/**********添加多文件上传************/
			function plusFile(){
				$("#otherFile").append("<p style=&#39;margin-top:-2px;&#39;><input type=&#39;file&#39; name=&#39;file&#39; style=&#39;display:inline; width:180px;&#39;/><button type=&#39;button&#39; class=&#39;btn btn-danger btn-xs&#39; style=&#39;border-radius:4px; margin-top:-5px;&#39; onclick=&#39;deleteCurrent(this)&#39;><i class=&#39;icon-trash icon-on-right bigger-110&#39;></i>删除</button></p>");
			}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery でフレームの端に触れたときに跳ね返るアニメーション効果を作成する方法

ラジオの動的コントロール選択失敗の問題を解決する方法

方法IEのeasyuiの非互換性を解決します

以上がjqueryはスタイル付きのHTMLタグを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。