JQuery - Ajout de cellules à arbre dynamique Tableau

Question

Je ne peux pas tout à fait envelopper la tête autour de cette ...

Une table comme celui ci-dessous est craché par un moteur de rendu de certains XML. Le XML dont il provient a une profondeur variable. (Veuillez préciser si j'utilise les rangées de manière horrible, je suis juste venu à cette table avec un peu d'expérimentation).

<table border="1"> 
    <tr> 
     <td rowspan="12">> 1</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 2</td> 
    </tr> 
    <tr> 
     <td>1 > 2 > 5</td> 
    </tr> 
    <tr> 
     <td>1 > 2 > 6</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 3</td> 
    </tr> 
    <tr> 
     <td>1 > 3 > 7</td> 
    </tr> 
    <tr> 
     <td>1 > 3 > 8</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 4</td> 
    </tr> 
    <tr> 
     <td>1 > 4 > 9</td> 
    </tr> 
    <tr> 
     <td>1 > 4 > 10</td> 
    </tr> 
</table> 

! [Alt texte] [1]

Ce que je suis en train d'accomplir dans JQuery est ce ...

1. utilisateur clique sur la cellule "1> 2" (qui avoir une pièce d'identité).
2. Un élément est ajouté dynamiquement au troisième niveau, mais UNDER "1> 2> 6".

Ce que je pouvais faire est d'ajouter juste une autre rangée sous « 1> 2 » et d'augmenter la rowspan de « 1> 2 », mais la nouvelle cellule serait alors apparaître sur l'ordre parmi « 1> 2> 5 "et" 1> 2> 6 ".

Je n'ai pas vraiment besoin du code exact pour le faire, juste quelque chose pour empêcher ma tête de tourner autour de ça ... Merci!

Answer 1

Il semble que vos rangées soient un peu étranges, la première rangée de la table est logique d'avoir 3 cellules dedans, la première rangées de 6, la seconde une rangée de 2, et enfin la "cellule unique". Malheureusement, <tr> et <td> ne sont pas fiables lorsqu'il s'agit de problèmes colspan/rowspan dans les navigateurs. SO1303106 montre une solution qui construit une matrice de chaque ligne/colonne et crée des fonctions pour vous aider à l'interroger. This article a inspiré cette solution, et montre le problème.

Utilisation de la fonction getTableState() de cet autre article. vous pourriez faire quelque chose comme ceci:

$("table").click(function(e) { 
    var targ = $(e.target); 
    var c = targ.closest('td').get(0); 
    if (!c) return; 
    var state = getTableState($(this).closest('table')[0]); 
    var rowSpan = c.rowSpan || 1; 
    // get the "bottom row" number from our clicked cell: 
    var rowNum = $(c).closest('tr').get(0).rowIndex + (rowSpan - 1); 
    var column = state.getRealColFromElement(c); 
    // push all rowspans on the clicked td and anything to the left 
    for (;column>=0; column--) { 
    var cell = state.cellMatrix[rowNum][column].cell; 
    cell.rowSpan = (cell.rowSpan||1)+1; 
    } 
    // insert a new row after the "bottom row" 
    $(this).closest('table').find('tr').eq(rowNum).after(
    '<tr><td>'+$(c).text() + ' > new</td></tr>' 
); 
}); 

Et juste pour le mettre tous ensemble a jsbin preview du produit fini ...

Answer 2

Si j'étais vous, j'utiliserais des listes imbriquées et utiliserais CSS pour gérer votre indentation. Les tableaux ne sont pas la réponse.

<ul><li>1 
    <ul><li> > 2 </li></ul> 
</li></ul> 

Answer 3

Im pas exactement ce que vous cherchez, mais je crois que vous avez besoin quelque chose comme ça

$('#myRow').click(function() { 
    $(this).parent.next().next().find('td').html('ADD ITEM HERE'); 
} 

Ce serait essentiellement obtenir le frère qui est de 2 lignes passées la ligne actuelle qui a été cliqué. J'espère que c'est ce que vous voulez dire par "troisième niveau".

Hope this helps, Metropolis

EDIT

Ok je pense que je vois ce que vous essayez de faire maintenant. Le "troisième niveau" sera essentiellement toutes les lignes après la ligne cliquée qui ne contiennent pas de rowspans/class/id particuliers.

Voici ce que je pense que vous devriez faire. Donnez à vos éléments racine un événement onclick avec des id de quelque chose comme "root1, root2, root3 ... etc ..." Ensuite, donnez à toutes les lignes après celle-ci mais avant la prochaine "rangée de niveau racine" une classe de "siblingroot1, siblingroot2 , siblingroot3 .... etc ... ", une fois que l'installation est, vous pouvez créer un événement click comme si,

$('#rootEle').click(function() { 
    $('.sibling' + $(this).attr('id')).find('td').html('ADD ITEM'); 
} 

Answer 4

Permettez-moi de voir si je peux obtenir ma tête autour de cela dans pseudocode. Il semble que vous devez faire deux choses bien distinctes:

this.parent.rowspan +1

et

this.parent.find.nextsibling.notWithRowSpan.addnewRowAndCell