Связанные строки в таблице - PullRequest
Новая
       10

Связанные строки в таблице

0 голосов
/ 05 января 2012

Мне нужно знать, как связать несколько строк в таблице вместе. Я сделаю все возможное, чтобы объяснить.

У нас есть страница, где клиент вносит список продуктов, описание и спецификации в таблицу. Эта страница управляется CMS, аналогичной редактору Rich Text. Макет будет примерно таким. 

<h1>Toyota - TR - H1</h1>
<h2>Toyota Landcruiser - TR - H2</h2>
<h3>Toyota Landcruiser Tray - TR - H3  Description(td2) specifications(td3)</h3>

TR - Строка таблицы TD - Столбец Столбец

Теперь H1 - это название компании, H2 - это раздел, а H3 - это фактический продукт. В разделе будет много продуктов, в одной компании может быть много разделов, и будет несколько компаний. Клиент не сможет добавлять классы или идентификаторы. Они просто создадут новую строку в существующей таблице и сбросят данные. Я должен загрузить контент из этого файла на основной сайт. Как связать все продукты (H3) с родительским разделом (H2) и материнской компанией (H1)? Невозможно использовать RegEx, так как нет гарантии, что в названии продукта будет указан префикс компании. Окончательный результат должен быть примерно таким, как показано ниже. Я попросил клиента использовать H1, H2, H3, чтобы различать продукты, разделы и компанию.

http://imageupload.org/?d=3E55009E1

Ответы [ 3 ]

1 голос
/ 05 января 2012

Попробуйте использовать jQuery's nextUntil .

Описание: Получить все последующие элементы каждого элемента, но не включая элемент, соответствующий селектору, узлу DOM или jQuery объект пройден.

http://jsfiddle.net/WF4mt/2/

//first add a class to each row containing an h1 tag so that
//we can identify blocks of rows
$('h1').each( function(index) {
    //add a class to each h1 tag
    $(this).closest('tr').addClass('h1row');
});

//then for each h1 row find subsequent rows that are 'children'
$('tr.h1row').each( function(index) {
    var rows = $(this).nextUntil('tr.h1row');
    rows.addClass('y' + index);
});
0 голосов
/ 05 января 2012

Проблема в том, что все элементы находятся на одном уровне и не имеют отношения родитель-потомок. Вкратце, я хотел бы добавить класс или идентификатор для всех строк, относящихся к конкретной компании. Логика, о которой я думал, - начать с h1 и добавить класс к этой строке и всем строкам под ней, пока она не достигнет другого h1. Повторите процесс для всех строк.

ОК, что-то вроде следующего, который выбирает все элементы h1, h2 и h3 и проходит через них, отмечая, что синтаксис множественного выбора возвращает элементы в порядке документа: 

function assignIds() {
   var currentH1 = 0,
       currentH2 = 0,
       currentH3 = 0;
   $("h1,h2,h3").each(function() {
      var $current = $(this);
      switch(this.tagName.toLowerCase()){
         case "h1":
            currentH1++;
            currentH2 = 0;
            currentH3 = 0;
            $current.attr("id", currentH1)
                    .data("companyId", currentH1);
            break;
         case "h2":
            currentH2++;
            currentH3 = 0;
            $current.attr("id", currentH1 + "_" + currentH2)
                    .data({"companyId" : currentH1,
                           "sectionId" : currentH2});
            break;
         case "h3":
            currentH3++;
            $current.attr("id", currentH1 + "_" + currentH2 + "_" + currentH3)
                    .data({"companyId" : currentH1,
                           "sectionId" : currentH2,
                           "productId" : currentH3});
            break;
      }
   });
);

Выше назначены атрибуты данных , а также показан один из способов создания уникальных идентификаторов. (Например, для элементов h3 идентификатор имеет вид «companyId_sectionId_productId», где «2_4_9» будет девятым продуктом четвертой секции второй компании.) Очевидно, вы можете настроить их по-другому или назначить классы или что-то еще.

0 голосов
/ 05 января 2012

Я собираюсь нанести удар по тому, что вы просите, и надеюсь, что я правильно понял.

Если вы делаете это в jQuery, 

$('h1')

вытянет список всех тегов h1, поэтому в соответствии с вашим текстом должны найти все записи.

Если вы хотите обработать все h1 и найти их соответствующие h2 и h3, это будет выглядеть примерно так 

$('h1').each(function(index)
{
    var h1 = $(this);

    // since we now have the index for this h1 in the page, use it to find the h2 and h3 elements
    var h2 = $('h2:eq(' + index + ')'),
        h3 = $('h3:eq(' + index + ')');

    // now we can get the text for each item and we have our company, section and product.
    var company = h1.text(),
        section = h2.text(),
        product = h3.text();
});

Тогда вы можете манипулировать или получать h2 и h3 по мере необходимости.

Я надеюсь, что это отвечает на вопрос о том, что вы спрашиваете.

...