jquery adds HTML tags with styles

This time I will bring you jquery to add styled HTML tags, what are the precautions for jquery to add styled HTML tags, the following is a practical case, one Get up and take a look.

is as follows:

<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>

The function we hope to achieve is: when the "Add" button is clicked, when the plan is uploaded Add a File Upload form to upload the schedule below, and there is a "Delete" button behind the new file upload form. When the "Delete" button is clicked, the newly added file can be uploaded. The form is deleted.

After clicking the "Add" button, a new form for uploading attachments and a delete button can be added.

When the "Delete" button is clicked, a new form for uploading attachments and a delete button can be added. will be deleted together

The code to achieve the above effect is: bind a click event to the "Add" button: onclick="plusFile()", when the "Add" button is clicked, plusFile will be triggered ()function. The function of the function is: first obtain the p whose id is otherFile through $("#otherFile"), and then add HTML elements to this p through the append function of jquery. The HTML elements to be added are:

<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>

The function is as shown in the following code:

/**********添加多文件上传************/
			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>");
			}

Then bind a click event to the "Delete" button: onclick='deleteCurrent(this)', when the "Delete" button is clicked, it will be triggered deleteCurrent(this) function. The function of this function is: first receive the parameter passed by this, then obtain the object where the "Delete" button is located through $(obj), and then obtain the parent element of the "Delete" button through $(obj).parent(), that is, < ;p>The newly added element is finally deleted through jquery's remove() function.

The function code is as follows:

/**********删除多文件上传***********/ 
function deleteCurrent(obj){ 
 $(obj).parent().remove(); 
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How jQuery can create an animation effect that bounces when it hits the edge of the frame

radio dynamics How to solve the problem of invalid control selection

How to solve the incompatibility of easyui in IE

The above is the detailed content of jquery adds HTML tags with styles. For more information, please follow other related articles on the PHP Chinese website!