jquery adds HTML tags with styles-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jquery adds HTML tags with styles

php中世界最好的语言

Mar 14, 2018 pm 04:43 PM

html jquery style

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>

Copy after login

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>

Copy after login

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>");
            }

Copy after login

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(); 
}

Copy after login

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!