Объект - Объект в Объекте - Массив этих Объектов - PullRequest
Новая
       2

Объект - Объект в Объекте - Массив этих Объектов

2 голосов
/ 21 мая 2011

Я новичок в javascript, поэтому позвольте мне сразу сказать это.

Веб-сайт, который я часто посещаю, содержит около 50 элементов с подробной информацией об этом элементе в таблице. Каждая строка таблицы содержит несколько ячеек td. Некоторые ряды имеют похожие типы устройств, например, USB-накопители или что-то еще. Я хочу захватить каждый ряд, чтобы я мог сгруппировать и переупорядочить их по своему вкусу.

У меня есть этот объект: 

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

Это представляет одну строку.

Я пытался понять, как захватить блок html < tr>stuff< /tr> и сохранить его в this.ItemBlock.

Эта часть довольно проста: 

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

Это кажется довольно простым. Я что-то упустил?

Эта часть застряла у меня:

Их будет 50, поэтому мне нужен массив vnlItemOnPage? 

vnlAllItems = ???

var vnlAllItems = [vnlItemOnPage]?

А как бы добавить в массив и удалить из массива? Я, вероятно, не буду удалять из массива, если это сложно, не беспокойтесь об этом.

После того как я перехватил

html, я могу просто добавить его к элементу таблицы следующим образом: 
myTable.appendChild(vnlAllItems[0].ItemBlock);

Правильно?

Я открыт для любых предложений, если вы думаете, что я подхожу к этому с неправильного направления. Производительность не является большой проблемой - по крайней мере, прямо сейчас. Позже я могу попытаться объединить несколько страниц для пары сотен предметов.

Спасибо за вашу помощь!

[править]

Возможно, вторая часть вопроса настолько проста, что трудно поверить, что я не знаю ответа.

Массив может быть: var vnlAllItems = []

И тогда это просто: var row1 = new vnlItemOnPage; vnlAllItems.push (row1); var row2 = new vnlItemOnPage; row2.ItemBlock = element.getElementByClassName ('className') [0];

Я хотел бы закрыть вопрос, но мне неприятно делать это без каких-либо действий с массивом.

Ответы [ 2 ]

1 голос
/ 21 мая 2011

Не уверен, что это то, что вы ищете, но если бы я хотел манипулировать строками таблицы, я бы сохранил:

  • Весь html <td>1</td>...<td>n</td> строки в виде строки, чтобы я мог быстро восстановить строку
  • Для каждой строки хранятся фактические значения ячеек [1, ..., n], поэтому я могу делать некоторые манипуляции со значениями (сортировка)

Чтобы получить строку в виде HTML, вы можете использовать: 

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

Чтобы получить массив значений ячеек, вы можете использовать: 

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

Таким образом, объект для хранения всего этого будет выглядеть примерно так: 

function vnlItemOnPage(){
  this.Category = "unknown";
  this.ItemClass = "vnlDefaultClass";
  this.RowHtml = "";
  this.RowCells = [];
}
1 голос
/ 21 мая 2011

JQuery ваш друг здесь.

Это даст вам внутренний HTML для первой строки в теле желаемой таблицы: 

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

Чтобы получить внешний HTML, вам нужен метод расширения jQuery: 

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

Простое использование: 

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

Наслаждайтесь!

...