Nach dem Klick anhängen Kind mit Eingabefeld wie Baum

Question

Ich versuche, Organisationsstruktur mit linken Kind und rechten Kind zu erstellen. genau so diese Demo http://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

Aber ich möchte Daten von hier mit Eingabefeld speichern. Ich möchte links und rechts Kind für jedes nach dem Klick erstellen. Jetzt werden alle nacheinander im unteren Bereich angezeigt und nur die Schaltfläche entfernt. Ich möchte hinzufügen Button auch für die Erstellung von Kind für jedes Eingabeformular. Hier verwendete ich wie dieses

$(function() { 
 
    var scntDiv = $('#p_scents'); 
 
    var i = $('#p_scents p').size() + 1; 
 

 
    $('#addScnt').live('click', function() { 
 
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
 
    i++; 
 
    return false; 
 
    }); 
 

 
    $('#remScnt').live('click', function() { 
 
    if (i > 2) { 
 
     $(this).parents('p').remove(); 
 
     i--; 
 
    } 
 
    return false; 
 
    }); 
 
});

* { 
 
    font-family: Arial; 
 
} 
 
h2 { 
 
    padding: 0 0 5px 5px; 
 
} 
 
h2 a { 
 
    color: #224f99; 
 
} 
 
a { 
 
    color: #999; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    color: #802727; 
 
} 
 
p { 
 
    padding: 0 0 5px 0; 
 
} 
 
input { 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -web-kit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
    <label for="p_scnts"> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
    </label> 
 
    </p> 
 
</div>

Hier jsfiddle DEMO ich will, ist Baumstruktur gleiche wie die Plug-In mit Eingabeformular erstellen. aber das ist mir nicht gelungen. Mein Snippet funktioniert nicht in Frage, also habe ich jsfiddle link platziert.

Answer 1

Es gibt verschiedene Fehler in Ihrem Code hauptsächlich die IDs sollten eindeutig sein. Und on() anstelle von live() verwenden, da es in neuen Versionen abgeschrieben wird. Sie können mit der Nutzung der Tabelle so etwas tun, ist es eine einfache Demo Sie es aktualisieren müssen

// bind click event handler 
 
$("#main").on('click', '.add', function() { 
 
    //getting parent td 
 
    var $td = $(this).parent(); 
 
    // creating child element 
 
    var $td1 = $('<td>', { 
 
    html: '<input />  <button class="add">+</button>  <button class="remove">-</button>' 
 
    }); 
 
    // getting child table if there is 
 
    var $tbl = $td.children('table') 
 
    // checking child exist or not , if yes then append child to it 
 
    if ($tbl.length) 
 
    $tbl.find('tr').eq(0).append($td1); 
 
    // else create new table and update 
 
    else 
 
    $td.append($('<table>', { 
 
     html: $('<tr>', { 
 
     html: $td1 
 
     }) 
 
    })) 
 
    // bind remove handler 
 
}).on('click', '.remove', function() { 
 
    // remove the parent td 
 
    $(this).parent().remove(); 
 
});

input { 
 
    width: 20px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="main" style="width:100%;text-align:center"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
     <button class="add"> 
 
     + 
 
     </button> 
 
     <button class="remove"> 
 
     - 
 
     </button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Die Elemente werden dynamisch zur Seite hinzugefügt, sodass die Ereignisse nicht an die hinzugefügten Elemente gebunden sind.

Überprüfen Sie diesen Code. Es wird klappen.

$(function() { 
 
     var scntDiv = $('#p_scents'); 
 
     var i = $('#p_scents p').size() + 1; 
 
     $('#addScnt').on('click', function() { 
 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
 
     i++; 
 
       return false; 
 
     }); 
 
    $(document).on("click", '#remScnt', function(e) { 
 
     if(i > 2) { 
 
         $(this).closest('p').remove(); 
 
         i--; 
 
       } 
 
       return false; 
 
    }); 
 
    }); 
 

* { font-family:Arial; } 
 
h2 { padding:0 0 5px 5px; } 
 
h2 a { color: #224f99; } 
 
a { color:#999; text-decoration: none; } 
 
a:hover { color:#802727; } 
 
p { padding:0 0 5px 0; } 
 

 
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
     <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
 
    </p> 
 
</div>

Answer 3

Dies kann die Arbeit tun, aber ich gebe es einige Fehler, aber ich denke, es ist immer noch würdig zu sehen .. ich es mit Hilfe von Bootstrap Grid-System gemacht.

HTML

<div class="container-fluid"> 
    <div class="row"> 
    <div class="parent-col col-md-12"> 
     <input type="text" /> 
     <BR /> 
     <a class='sibling'>Add Sibling</a> 
     or 
     <a class='child'>Add Child</a> 
    </div> 
    </div> 
</div> 

JS

$('.child').click(function(){ 
    var r = $(this).closest('div.row').clone(true, true); 
    r.find('.parent-col').not(':eq(0)').remove(); 
    var c = $(this).closest('.parent-col'); 
    var n = c.append(r); 
}); 

$('.sibling').click(function(){ 

    var thisC = $(this).closest('.parent-col'); 
    var n = thisC.clone(true, true); 
    thisC.after(n); 
    var c = $(this).closest('div.row'); 
    var len = $('div.parent-col', c).length; 
    var newClass = Math.ceil(12/len); 
    c.find('.parent-col').attr('class', 'parent-col col-md-'+newClass); 

}); 

jsFiddle

-Test es im Hinblick auf voller Breite auf einfache Weise die Baumstruktur bemerken.