JQuery - Добавление ячеек для динамического дерева таблицы

Question

Я не могу достаточно обернуть мою голову вокруг этого ...

таблицы, как показано ниже будет выплюнуть на визуализатор из некоторого XML. XML, из которого он поступает, имеет переменную глубину. (Пожалуйста, укажите, если я использую ряды в ужасающей манере, я просто пришел к этой таблице с некоторыми экспериментами).

<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> 

! [Альтернативный текст] [1]

То, что я пытаюсь сделать в JQuery это ... щелкает

1. Пользователь ячейки "1> 2" (который будет имеют идентификатор).
2. Элемент динамически добавляется на третий уровень, но UNDER «1> 2> 6».

Что я мог сделать, это просто добавить еще одну строку под «1> 2» и увеличить RowSpan от «1> 2», но новая ячейка появилась бы из того, среди «1> 2> 5 "и" 1> 2> 6 ".

Мне не нужен точный код, чтобы сделать это, просто чтобы остановить мою голову от вращения вокруг ... Спасибо!

Answer 1

Кажется, что ваши ряды немного странны, первая строка таблицы имеет смысл иметь в ней 3 ячейки, первые ряды строк 6, вторую - ряды строк 2 и, наконец, «одиночную ячейку». ..

К сожалению, <tr> и <td> являются ненадежными при работе с проблемами colspan/rowspan в браузерах. SO1303106 показывает решение, которое создает матрицу каждой строки/столбца и создает некоторые функции, которые помогут вам запросить его. This article вдохновил это решение и показывает проблему.

Использование функции getTableState() из этой другой статьи. вы могли бы сделать что-то вроде этого:

$("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>' 
); 
}); 

И просто поставить все это вместе a jsbin preview готового продукта ...

Answer 2

Если бы я был вами, я бы использовал вложенные списки и использовал CSS для обработки вашего отступа. Таблицы - это не ответ.

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

Answer 3

Я не совсем уверен, что вы ищете, но я считаю, что вам нужно что-то вроде этого

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

это будет в основном получить одноуровневый, который 2 строки мимо текущей строки, которая была нажата. Надеюсь, это то, что вы подразумеваете под «третьим уровнем».

Надеется, что это помогает, Metropolis

EDIT

Хорошо, я думаю, я вижу, что вы пытаетесь сделать сейчас. «Третий уровень» в основном будет состоять из всех строк после щелкнутой строки, которая не содержит конкретных rowspans/class/id.

Вот что я думаю, что вам следует делать. Дайте вашим корневым элементам событие onclick с идентификаторами чего-то типа «root1, root2, root3 ... и т. Д.». Затем передайте все строки после этого, но перед следующей «строкой уровня корня» класс «siblingroot1, siblingroot2 , siblingroot3 .... и т.д ... ", как только это настройка, то вы можете создать событие щелчка, как это так,

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

Answer 4

Позвольте мне увидеть, если я могу получить мою голову вокруг этого в псевдокоде. Кажется, что вам нужно сделать две совершенно разные вещи:

this.parent.rowspan +1

и

this.parent.find.nextsibling.notWithRowSpan.addnewRowAndCell