Bootstrap implementiert die gemeinsame Nutzung von Beispielen für Eingabefeldgruppenfunktionen über die Schaltflächen „Hinzufügen' und „Subtrahieren'.-js-Tutorial-php.cn

Bootstrap implementiert die gemeinsame Nutzung von Beispielen für Eingabefeldgruppenfunktionen über die Schaltflächen „Hinzufügen' und „Subtrahieren'.

小云云

Freigeben： 2018-01-18 14:59:30

Original

3677 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Bootstrap-Eingabefeldgruppe vorgestellt, indem Schaltflächen zum Hinzufügen und Löschen von Inline-Eingabefeldgruppen hinzugefügt werden. Wenn ich auf die Schaltfläche „-“ klicke, wird eine Reihe von Eingabefeldgruppen hinzugefügt. Diese Zeile mit Eingabefeldern wird gelöscht. Den spezifischen Implementierungscode finden Sie in diesem Artikel. Ich hoffe, er kann Ihnen helfen.

Das Implementierungseffektdiagramm sieht wie folgt aus:

Wenn ich auf die Schaltfläche „+“ klicke, wird eine Reihe von Eingabefeldern hinzugefügt, wenn ich auf „-“ klicke. Schaltfläche, diese Zeile wird gelöscht. Der HTML-Code der Eingabefeldgruppe

lautet wie folgt:

<p class="input-group" id="centerIpGroup"> 
  <label class="input-group-addon" id="basic-addon5">中心机IP:</label>   
  <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled><span class="glyphicon glyphicon-plus"></span></button>    
</p>

Nach dem Login kopieren

+ Schaltflächenklick löst Ereignisfunktion aus:

//添加中心机IP输入框项 
  function addCenterIpGrp(obj){ 
    html = &#39;<p class="input-group centerIp">&#39;+ 
          &#39;<label class="input-group-addon">IP：</label>&#39;+ 
          &#39;<input type="text" class="form-control" id="ipInput">&#39;+ 
          &#39;<label class="input-group-addon">注释：</label>&#39;+ 
          &#39;<input type="text" class="form-control" id="descInput">&#39;+ 
          &#39;<span class="input-group-btn">&#39;+ 
                &#39;<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>&#39;+ 
          &#39;</span>&#39;+ 
        &#39;</p>&#39; 
    obj.insertAdjacentHTML(&#39;beforebegin&#39;,html) 
  }

Nach dem Login kopieren

- Schaltflächenklick-Trigger-Ereignisfunktion:

$(document).on(&#39;click&#39;,&#39;#delCenterIpGrp&#39;,function(){ 
  var el = this.parentNode.parentNode 
  var centerIp = $(this).parent().parent().find(&#39;#ipInput&#39;).val() 
  alertify.confirm(&#39;您确定要删除选中的命令？&#39;, 
  function(e){ 
    if(e){ el.parentNode.removeChild(el)}})})

Nach dem Login kopieren

Verwandte Empfehlungen:

Einführung in das Bootstrap-Eingabefeld Eine Funktion der Gruppe

Verwenden Sie jQuery, um die Eingabefeldgruppe Eingabegruppe basierend auf Bootstrap_Javascript-Fähigkeiten hinzuzufügen und zu löschen

Wortzählung im js-Eingabefeld. In Echtzeit aktualisierte Beispiel-Tutorials

Das obige ist der detaillierte Inhalt vonBootstrap implementiert die gemeinsame Nutzung von Beispielen für Eingabefeldgruppenfunktionen über die Schaltflächen „Hinzufügen' und „Subtrahieren'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!