Как добавить новые строки и столбцы таблицы с заголовками таблицы в таблицу CSS - PullRequest
Новая
       12

Как добавить новые строки и столбцы таблицы с заголовками таблицы в таблицу CSS

2 голосов
/ 23 августа 2011

У меня следующий формат таблицы, и я хотел бы иметь возможность добавлять новые столбцы и новые строки на основе пользовательских данных.

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

Например:

Список имен: [Джефф] [Билл] [Фред] [Джейк]

Список элементов, добавляемых в каждый столбец: [яблоки] [апельсины] [автомобили] [обувь]

Если были выбраны Джефф и Билл, а также яблоки и апельсины, таблицу следует обновить, чтобы она выглядела так. 

[Name] [apples] [oranges]
[jeff] [      ] [       ]
[bill] [      ] [       ]

Если бы тогда был выбран другой элемент, он бы выглядел так 

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]

Кроме того, если в этот момент было выбрано другое имя, оно должно выглядеть так 

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]
[fred] [      ] [       ] [     ]

Вот как выглядит HTML-структура: 

<form>
    <div id="opTable"> 
        <div class="thead">
            <div class="th first">
                Name
            </div>
            <div class="th">
                clase
            </div>
            <div class="th">
                gold
            </div>
        </div>
        <div class="tbody"> 
            <div class="tr"> 
                <div class="td first">
                    Billy
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
            </div>
        </div>
    </div>
</form>

Кроме того, код должен иметь возможность удалять имя и / или элемент таким же образом. Я надеюсь, что мой вопрос достаточно ясен.

Ответы [ 2 ]

0 голосов
/ 23 августа 2011

Если вы хотите четко отобразить таблицу, то я бы предложил также использовать table для разметки.

Это также значительно упростит рендеринг разметки как таблицы :)При использовании table отображение столбцов рядом друг с другом будет присуще.Не нужно хитрости CSS.

Добавление другой строки станет (я использую DOM API здесь, потому что он более производительный, чем добавление строк, если ваша таблица становится большой) 

//Assuming each row has the same nr of columns
var numcols = $('#opTable tr:eq(0) td').length;
var row = document.createElement('tr');

//Insert name
var name_td = document.createElement('td');
row.appendChild(name_td);
name_td.appendChild(document.createTextNode(name));

//fill the rest with empty td's
for (var i=1; i < numcols; i++) {
    row.appendChild(document.createElement('td'));
}

$('#opTable').append(row);

Добавление столбца означает выполнение чего-либоочень похоже, разница только в том, что вы добавляете <td> к каждому <tr>: 

$('#opTable').find('tr').each(function(i) {
    if (i == 0) {
       $(this).append('<td>' + item + '</td>');  
    }
    else {
        $(this).append('<td/>');
    }
});
0 голосов
/ 23 августа 2011

Поскольку вы используете jQuery, .append() и / или .appendTo() - это функции, которые вы хотите использовать.Добавьте к этому петлю .each(), и все будет хорошо.

...