jquery에서 스타일을 사용하여 HTML 태그 요소를 동적으로 추가하는 방법

亚连
풀어 주다: 2018-06-05 09:16:39
원래의
2044명이 탐색했습니다.

아래에서는 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>
로그인 후 복사

달성하려는 기능은 "추가" 버튼을 클릭할 때 업로드 계획 아래에 계획 업로드를 위한 다른 파일 업로드 양식을 추가하고 새 파일을 업로드하는 것입니다. 는 양식 뒤에 있는 '삭제' 버튼입니다. '삭제' 버튼을 클릭하면 새로 추가된 파일 업로드 양식을 삭제할 수 있습니다. 효과는 아래 그림과 같습니다.

"추가" 버튼을 클릭하면 첨부 파일 업로드를 위한 양식과 삭제 버튼을 추가할 수 있습니다. 효과는 아래 그림과 같습니다.

삭제 버튼을 클릭하면 새로 추가된 업로드 첨부 양식과 삭제 버튼이 함께 삭제됩니다. 효과는 아래 그림과 같습니다.

위 효과를 구현하는 코드는 다음과 같습니다. "추가" 버튼에 대한 클릭 이벤트: onclick= "plusFile()", "추가" 버튼을 클릭하면 plusFile() 함수가 트리거됩니다. 함수의 기능은 다음과 같습니다. 먼저 $("#otherFile")을 통해 ID가 otherFile인 p를 가져온 다음 jquery의 추가 기능을 통해 이 p에 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>
로그인 후 복사

함수 코드는 다음과 같습니다. 표시:

/**********添加多文件上传************/
			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>");
			}
로그인 후 복사

그런 다음 "삭제" 버튼에 클릭 이벤트를 바인딩합니다: onclick='deleteCurrent(this)' "삭제" 버튼을 클릭하면 deleteCurrent(this) 함수가 실행됩니다. 트리거됩니다. 이 함수의 기능은 다음과 같습니다. 먼저 전달된 매개변수를 받은 다음 $(obj)를 통해 "삭제" 버튼이 있는 개체를 얻은 다음 $(obj)를 통해 "삭제" 버튼의 상위 요소를 얻습니다. .parent(), 즉 < ;p> 새로 추가된 요소는 jquery의 Remove() 함수를 통해 최종적으로 삭제됩니다.

함수 코드는 다음과 같습니다.

/**********删除多文件上传***********/ 
function deleteCurrent(obj){ 
 $(obj).parent().remove(); 
}
로그인 후 복사

이렇게 하면 위에서 원하는 기능이 완성됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript에서 Li 요소를 동적으로 추가하는 방법의 예

plotly.js 드로잉 라이브러리 사용 튜토리얼의 자세한 해석(자세한 튜토리얼)

elementui에서 기본 스타일을 수정하는 방법은 무엇입니까?

위 내용은 jquery에서 스타일을 사용하여 HTML 태그 요소를 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!