Object - Un objet dans l'objet - Un tableau de ces objets

Question

Je suis novice en javascript alors permettez-moi de le dire tout de suite.

Un site Web que je fréquente contient environ 50 éléments, avec des détails sur cet élément, dans un tableau. Chaque ligne de table contient plusieurs cellules td. Certaines lignes ont des types de choses similaires, comme les clés USB ou autres. Je veux capturer chaque rangée pour pouvoir les regrouper et les réorganiser selon mes goûts.

J'ai cet objet:

function vnlItemOnPage(){ 
    this.Category = "unknown"; 
    this.ItemClass = "vnlDefaultClass"; 
    this.ItemBlock = {}; 
} 

Cela représente une ligne.

Ce que j'ai essayé de comprendre est comment capturer le bloc de html < tr>stuff< /tr> et l'enregistrer dans this.ItemBlock.

Cette partie est assez facile:

vnlItemOnPage.ItemBlock = element.getElementByClassName('className')[0] 

?

Cela semble assez simple. Est-ce que je manque quelque chose?

Cette partie, je suis coincé:

Il y aura 50 d'entre eux, donc je besoin d'un tableau de vnlItemOnPage?

vnlAllItems = ??? 

var vnlAllItems = [vnlItemOnPage]? 

Et, comment est-ce que j'ajouterais au tableau et supprimerais du tableau? Je ne vais probablement pas supprimer de la matrice si cela est compliqué ne dérange pas avec elle.

Une fois que je capture la < tr> html, je peux l'ajouter à un élément de table comme ceci:

myTable.appendChild(vnlAllItems[0].ItemBlock); 

correcte?

Je suis ouvert à toutes les suggestions si vous pensez que j'aborde cela dans la mauvaise direction. La performance n'est pas un gros problème - du moins en ce moment. Plus tard, je peux essayer d'assembler plusieurs pages pour quelques centaines d'objets.

Merci pour votre aide!

[modifier]

Peut-être la deuxième partie de la question est si fondamentale, il est difficile de croire que je ne connais pas la réponse.

Le tableau pourrait être: var vnlAllItems = []

Et il est juste: var ligne1 = new vnlItemOnPage; vnlAllItems.push (row1); var row2 = new vnlItemOnPage; row2.ItemBlock = element.getElementByClassName ('className') [0];

Je voudrais fermer la question mais je déteste faire cela sans quelque chose à propos de la gestion de la matrice.

Answer 1

JQuery est votre ami.

Cela vous donnera le code HTML interne pour la première ligne dans le corps de votre table désirée:

var rowHtml = $('table#id-of-desired-table tbody tr:first').html() ; 

Pour obtenir le code HTML externe, vous avez besoin d'une méthode d'extension jQuery:

jQuery.fn.outerHTML = function() { 
    return $('<div>').append(this.eq(0).clone()).html(); 
}; 

L'utilisation est simple:

var rowHtml = $('table#id-of-desired-table tbody tr:first').outerHtml() ; 

Profitez!

Answer 2

Je ne sais pas si elle est ce que vous recherchez, mais si je voulais manipuler les lignes de table Je stockeriez:

• toute html ligne <td>1</td>...<td>n</td> sous forme de chaîne pour que je puisse reconstruire rapidement la ligne
• Pour chaque magasin de valeurs pour la ligne cellule réelle [1, ..., n], donc je peux faire quelques manipulations avec des valeurs (tri)

Pour obtenir une ligne sous HTML, vous pouvez utiliser:

var rowHtml = element.getElementByClassName('className')[0].innerHTML; 

Pour obtenir tableau de valeurs de cellules, vous pouvez utiliser:

var cells = []; 
var cellElements = element.getElementByClassName('className')[0].cells; 
for(var i=0;i<cellElements.length;i++) { 
    cells.push(cellElements[i].innerText); 
} 

donc l'objet pour stocker tout cela ressemblerait à quelque chose comme:

function vnlItemOnPage(){ 
    this.Category = "unknown"; 
    this.ItemClass = "vnlDefaultClass"; 
    this.RowHtml = ""; 
    this.RowCells = []; 
}