Преобразуйте столбцы TD в строки TR
Есть ли быстрый способ перевести (использование CSS или JavaScript) таблицы TD в TR, в настоящее время я имею:
A B C D
1 2 3 4
и я хочу перевести в:
A 1
B 2
C 3
D 4
??
2 ответа
Вы хотите преобразовать HTML в таком виде:
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
В это:
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>
Верно?
Вы можете сделать это с помощью Javascript, однако, Трудно предложить метод, не зная больше о структуре вашего сайта / HTML-файлов. Я попробую.
Предположим, что ваш тег Вы можно создать новую таблицу следующим образом: Теперь вам нужно перенести старые строки таблиц в новые столбцы таблиц: Это должно делать то, что вам нужно. Предупреждаем: не тестировалось. Работа с этим кодом javascript в HTML страница оставлена в качестве упражнения для читателя. Если кто-то обнаружит какие-либо ошибки, которые я пропустил, я буду рад, если вы укажете на них мне или просто отредактируете, чтобы исправить:) Вот протестированная функция, которая транспонирует таблицу и сохранит любое форматирование / события, которые вы связали с любыми элементами в таблице (т. Е. : onclicks на ячейку или содержимое ячейки) Примечания:
- Требуется JQuery
- Не тестировалось на очень больших таблицах
- Скорее всего, не справится с таблицами с составными столбцами / строками
- Скорее всего, не справится с таблицами с любой комбинацией thead / th . Пока в ваших таблицах нет составных ячеек и не используется thead / th, все будет в порядке. имеет идентификатор (например,
, вы можете получить к нему доступ в javascript следующим образом:
var myTable = document.getElementById('myTable');
var newTable = document.createElement('table');
var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
if(myTable.rows[r].cells.length > maxColumns) {
maxColumns = myTable.rows[r].cells.length;
}
}
for(var c = 0; c < maxColumns; c++) {
newTable.insertRow(c);
for(var r = 0; r < myTable.rows.length; r++) {
if(myTable.rows[r].length <= c) {
newTable.rows[c].insertCell(r);
newTable.rows[c].cells[r] = '-';
}
else {
newTable.rows[c].insertCell(r);
newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
}
}
}
function TransposeTable(tableId)
{
var tbl = $('#' + tableId);
var tbody = tbl.find('tbody');
var oldWidth = tbody.find('tr:first td').length;
var oldHeight = tbody.find('tr').length;
var newWidth = oldHeight;
var newHeight = oldWidth;
var jqOldCells = tbody.find('td');
var newTbody = $("<tbody></tbody>");
for(var y=0; y<newHeight; y++)
{
var newRow = $("<tr></tr>");
for(var x=0; x<newWidth; x++)
{
newRow.append(jqOldCells.eq((oldWidth*x)+y));
}
newTbody.append(newRow);
}
tbody.replaceWith(newTbody);
}
Похожие вопросы: