jQuery實現動態新增刪除輸入框
<%if(isAdd){%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
<span style="color: red;">*</span>sku屬性值:
</div>
<div class="am-u-sm-6 am-u-md-6">
<input type="text" name="opts" value="" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
<button type="button" class="addInput
</div>
</div>
<%}else{%>
<!--第一個不能刪除,從for中拿出來-->
<%for(opt in opts!){%>
<%if(optLP.index==1){%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
<span style="color: red;">*</span>sku屬性值:
</div>
<div class="am-u-sm-6 am-u-md-6">
<input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
<button type="button" class="addInput
</div>
</div>
<%}else{%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
sku屬性值:
</div>
<div class="am-u-sm-6 am-u-md-6">
<input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
<button type="button" class="deleteInput
</div>
</div>
<%}%>
<%}%>
<%}%>
<div id="container">
</div>
<script type="text/javascript">
$(function(){
//動態新增、刪除輸入框的效果
$(".addInput").click(function(){
var $container = $("#container");
var $newDiv = $("<div class='am-g am-form-group am-margin-top'></div>");
$newDiv.append($("<div class='am-u-sm-4 am-u-md-2 am-text-right'>sku屬性值:</div>"))
.append("<div class='am-u-sm-6 am-u-md-6'><input type='text' name='opts' value='' minlength='2' maxlength='32' placeholder='請輸入sku屬性值名稱' required/></div>")
.append("<div class='am-u-sm-2 am-u-md-4'><button type='button' class='deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs'>-</button></div>");
$container.append($newDiv);
//為新新增的這一行的按鈕新增點選事件
$(".deleteInput").click(function(){
$(this).parent().parent().remove();
});
});
//編輯中本來有的可以刪除
$(".deleteInput").click(function(){
$(this).parent().parent().remove();
});
});
</script>
另外就是邏輯上注意:編輯的時候不僅要準備本實體:回顯本實體資料,還需要準備與本實體相關聯的這些實體,以迴圈。然後在新增的時候,將這些資料插入關聯的表中,本實體的id肯定是一個欄位。
編輯的時候先刪除原來本實體相關聯的,再插入現在的。
相關推薦
jQuery實現動態新增刪除輸入框
在一個專案中,一個實體需要動態新增另外的實體多個,即在新增或者編輯這個實體的時候,需要動態新增輸入框。利用jQuery簡單實現了一下,小有成就感。 <%if(isAdd){%> <div class="am-g am-form-group am-mar
Jquery 實現動態添加輸入框&編號
del 效果圖 3.3 src i+1 var remove 添加 http 輸入框動態增加和刪除並重新編號: 代碼附上: <!DOCTYPE html> <html lang="en"> <head> <me
jQuery實現動態新增tr到table的方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html;
Jquery實現動態新增table以及JSON陣列的解析
昨天寫一個作業的時候,因為一個錯誤浪費了我兩個多小時,為了以後不再同一個地方摔倒,果斷記錄下來。程式碼片先粘過來 $(".borrow").click(function(){ var text2=""; var text
ielement-ui實現動態新增刪除
需求如下,點選新增和刪除按鈕,實現月份,任務數的新增,點選刪除,刪除當前的任務 <div v-for="(item,index) in task_arr" class="agent-vlist"> <div class="agent-label"
jquery + php動態新增刪除表單的方法
<button id='insertButton' onClick='addResource()'>增加</button> <?php ob_start();?> &
JQuery實現動態新增的標籤元素的點選事件
這裡所說的動態新增的元素的意思是:用js新增的標籤元素先說一下我遇到的問題:想對一些資料實現分頁,就自己寫一個分頁功能。用的是bootstrap的分頁,在頁面獲取資料列表後,計算出需要分多少頁展示,然後
###①datatable客戶端分頁,全選只能選中一頁(能力有限,(雖然不是服務端分頁),同事-老大都不知道)+ ②【動態新增刪除CheckBox的ID】 JQuery datatables 表頭複選框切換頁面時保持選中的問題
①datatable客戶端分頁,全選只能選中一頁(能力有限,(雖然不是服務端分頁),同事-老大都不知道)。 對於要解決的問題: 【 JQuery datatables 表頭複選框切換頁面時保持選中的問題 】 ==== 這個:https://blog.csdn.net/nihaoqiuli
react實現刪除輸入框內容
react中實現刪除輸入框中的內容 import React,{Component} from 'react' class Clear extends Component{ constructor(props){ super(props) this.state={ data:
Jquery sumoselect 下拉外掛,實現動態新增option
相信很多人都會使用下拉列表select,原生的太醜,很難去修改樣式和高度,所以找了一個sumoselect,功能很強大,並且樣式也很好看,不過現在遇到一個問題是,下拉option事先寫好了,的確是
jquery結合js實現動態新增內容,並給動態新增的內容新增事件
jquery結合js實現向後臺傳送請求,給頁面動態新增內容,並給動態新增的內容新增事件.html內容如下: <button class="btn btn-md customButton" id="add_red_envelope">新增紅包&
AngularJS:實現動態新增輸入控制元件功能
1 <div class="form-group" ng-controller="SendSafeMessageController"> 2 <label class="col-md-2 control-label">答覆內容:</label> 3 &
jQuery實現當select下拉框內容變化時,input輸入框內容隨之變化
今天實現了一個功能,當select下拉框中的內容發生變化時,input輸入框中的內容隨之發生變化,具體實現方法如下: //繫結change事件,當下拉框內容發生變化時啟動事件 $("#wlms")
jQuery 如何動態新增、刪除 class 樣式方法介紹
獲取與設定樣式 獲取class和設定class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class,JQuery程式碼如下: var p_class = $("p").attr("class"); //獲取p元素的class [html]
JQuery動態新增/刪除class樣式
有時我們會對某個控制元件的class樣式進行獲取、新增、修改、刪除。下面是簡單整理的一些例項用法: html樣例程式碼如下: <ul class="pro_list fl cont"> <li class="core"><
JS+jQuery+Easyui實現動態新增控制元件及賦值
背景:某天陽光明媚的午後,和小夥伴們完一個遊戲,在一個黑箱中放了紅橙黃綠青藍紫七種顏色的球,我讓幾名玩遊戲的小夥伴分別從黑箱裡抓球,並且統計他們都抓了哪種顏色的球。。最後的結果是,有抓的多,有抓的少,抓到的顏色也不一樣。 那麼問題來了!! 如果讓你做一個統計軟體怎麼記錄
利用Rabbit MQ 實現一對多通知功能(動態新增刪除佇列交換機)
樓主在專案中需要實現分散式lucene查詢,由於lucene的索引是存放在本地的。網上有很多方案實現起來相對比較複雜,故樓主為了簡單化針對索引同步問題採用的方案是,如果某一結點發生索引的增刪改,通過rabbitmq通知所有lucene節點也進行本地的索引的更改。
Jfinal中實現Ajax動態新增下拉框資料
實現效果如下: 顯示頁面的JQ程式碼事例: $.ajax({ url: "${ctx}/resource/getResName" , //後臺方法名稱
在做動態新增刪除行的時候,使用jquery遇到的問題:$("#participantList tr").eq(i).remove();
在做動態新增刪除行的時候,我首先使用到的寫法是:$("#participantList tr:eq(i)").remove(); 這種寫法當然可以達到刪除的效果,可是很奇怪的是,它每次刪除的是第一個行資料; 糾結了很半天不知道問題出在哪裡,後來換了種寫法:
擴充套件:spring3整合quartz2,實現動態新增、刪除定時任務
本文的用的是quartz-2.2.1與spring-3.2.2。之所以在這裡特別對版本作一下說明,是因為spring和quartz的整合對版本是有要求的。spring3.1以下的版本必須使用quartz1.x系列,3.1以上的版本才支援quartz 2.x,不然會出錯。原因主要是:spring對於qu