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>

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

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

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

위 효과를 구현하는 코드는 다음과 같습니다. "추가" 버튼에 대한 클릭 이벤트: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!