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의 추가 기능을 통해 이 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(); 
}

이 기사의 사례를 읽으신 후 메소드를 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

프레임 가장자리에 닿으면 튀어오르는 jQuery로 애니메이션 효과를 만드는 방법

라디오의 동적 제어 선택 실패 문제를 해결하는 방법

방법 IE

에서 easyui의 비호환성 해결

위 내용은 jquery는 스타일이 포함된 HTML 태그를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!