2014-04-02 92 views
-3

我想要一個讓用戶能夠動態添加字段的表單。我需要的是能夠添加動態的孩子,並賦予每個孩子添加N個孩子的能力。很像這樣使用JavaScript/jQuery動態添加兄弟和子元素

Parent 1 
    -- Child 1-1 
    -- Child 1-2 
     -- Child 1-2-1 
     -- Child 1-2-2 
     -- Child 1-2-3 
     -- Child 1-2-4 
      -- Child 1-2-4-1 
      -- Child 1-2-4-2 
    -- Child 1-3 
    -- Child 1-4 
    -- Child 1-5 
    -- Child 1-5-1 
Parent 2 
Parent 3 
    -- Child 3-1  

一切都是動態的,用戶可以儘可能深入。到目前爲止,我能夠實現類似於JsFiddle鏈接的東西,並且在深入2個級別後我陷入了嚴重的困境。 P.S:這些數字是爲了顯示兒童與其兄弟姐妹,其父母及其子女之間的關係。 更新1:這是我已經能夠迄今爲止達到:JsFiddle

更新2:有沒有這方面的一些更多的工作,並能得到這麼遠:jsFiddle

+0

好主意,你到目前爲止嘗試過什麼?如果您對如何做到這一點不知所措,可以使用帶有複選框或下拉菜單的'.append()'或'.clone'來嘗試jQuery/Javascript,以指示該項目是子項目還是新項目。還有一個「輸入」按鈕,用於運行代碼 –

+0

[http://code.google.com/p/editable-jquery-tree-with-php-codes/](http://code.google.com/p/編輯 - jQuery的樹與php代碼/) –

+0

我能夠實現這一點:http://jsfiddle.net/Z9SBa/18/ –

回答

1

所討論,我已經在the fiddle上完成了。

請使用wrapElement()函數將您的元素封裝在div中以滿足您的需求。如果你失去了小提琴,這裏的代碼

$('.level_1').on('click', spawn); 
function spawn(){ 
    // check level 
    var level = stripLevel(this.className); 
    if (level !== '') { 
     var countOthers = this.parentNode.querySelectorAll("[class^='level_" + level +"']").length; 
     var x = wrapElement(level, countOthers); 
     if (level.length == 1) { 
      $('#addedElements').append(x); 
     } else { 
      //x.insertAfter(this); 
      $(this).parent().append(x); 
     } 
    } 
} 

// strip level 
var stripLevel = function(className) { 
    var index = className.indexOf('_'); 
    if(index > -1) { 
     return className.substr(index + 1); 
    } else { 
     return ''; 
    } 
} 

// wrapper element 
var wrapElement = function(level, number) { 
    var div = $('<div></div>'); 
    if (level.length == 1) { 
     // it's parent 
     var input = $('<input type="text" name="foo_" />'); 
     div.append(input); 
    } else { 
     // it's child 
     var span = $('<span>child level ' + level + '-' + number + '</span>'); 
     div.append(span); 
    } 
    // add button 
    var button = $('<input class="level_' + level + '-' + number + '" type="button" value="Add Navigation" />'); 
    button.on('click', spawn); 
    div.append(button); 
    div.css('margin-left', (level.length * 10) + 'px'); 
    return div; 
} 
+0

這完全符合我的要求。非常感謝,@ KarelG! –

1

我不會用的onclick在HTML屬性,但隨着的javascrip

如果你的孩子節點都使用相同的代碼,你可以嘗試使用遞歸的方法添加的事件處理程序:

function spawn(event) { 
    $(this).append(child); 
    $(child).on('click', function(event) {spawn(event);}); 
} 


$('.parent').on('click', function(event) {spawn(event);}); 

是第一個想法(有jquery),也許它啓發你。

p.s. 。缺乏代表做出此評論,所以這是一個答案,而不是>>

+0

感謝您的評論。我現在只是使用'onClick()'來至少讓它工作。 我喜歡遞歸函數的想法,我相信我已經使用了相同的方法;相同的功能添加儘可能多的父母和孩子。如果你可以改善我提供鏈接的JsFiddle,我會非常感激。謝謝。 –

1

基礎上user3154108的答案,這裏有一個遞歸解決方案,你可以這樣開始:

$('.parent').on('click', spawn); 
function spawn(){ 
    var x = $('<input class="' + this.className + '-child" type="button" value="Add Navigation" />'); 
    x.on('click', spawn); 
    x.insertAfter(this); 
} 

http://jsfiddle.net/Z9SBa/23/

相關問題