JavaScript/JQuery своп горизонтальный и вертикальный порядок таблицы HTML

Question

У меня есть сложный HTML-стол с горизонтальными и вертикальными заголовками, похожими на этот.

HTML-код прост:

<table> 
    <tr> 
     <th>(empty)</th> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
    </tr> 
<tr> 
    <th>Heading A</th> 
    <td>content for 1 and A</td> 
    <td>content for 2 and A</td> 
</tr> 
<tr> 
    <th>Heading B</th> 
    <td>content for 1 and B</td> 
    <td>content for 2 and B</td> 
</tr> 
<tr> 
    <th>Heading C</th> 
    <td>content for 1 and C</td> 
    <td>content for 2 and C</td> 
</tr> 
</table> 

Теперь я хочу, чтобы дать пользователям моего сайта возможность поменять содержимое таблицы. I.e: измените горизонтальный и вертикальный порядок, чтобы затем вертикальные заголовки были горизонтальными, горизонтальные заголовки вертикальны и ячейки таблицы соответственно. Звучит сложно, но вы получите его, глядя на картину:

HTML-бы сейчас:

<table> 
    <tr> 
     <th>(empty)</th> 
     <th>Heading A</th> 
     <th>Heading B</th> 
     <th>Heading C</th> 
    </tr> 
<tr> 
    <th>Heading 1</th> 
    <td>content for 1 and A</td> 
    <td>content for 1 and B</td> 
    <td>content for 1 and C</td> 
</tr> 
<tr> 
    <th>Heading 2</th> 
    <td>content for 2 and A</td> 
    <td>content for 2 and B</td> 
    <td>content for 2 and C</td> 
</tr> 
</table> 

Технически говоря, Иви ячейки таблицы (th и td) должен поменять его индексы: индекс столбца должен стать индексом строки, а индекс столбца должен быть индексом rown. Но как мне это сделать с помощью JavaScript и JQuery?

я уже выяснил, как получить строки и столбца индекса:

//column 
$(this).parent().children().index(this); 

//row 
$(this).parent().parent().children().index(this.parentNode); 

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

Answer 1

Изменить HTML, как этот

<table> 
<tbody> 
    <tr> 
     <td>(empty)</td> 
     <td>Heading 1</td> 
     <td>Heading 2</td> 
    </tr> 
<tr> 
    <td>Heading A</td> 
    <td>content for 1 and A</td> 
    <td>content for 2 and A</td> 
</tr> 
<tr> 
    <td>Heading B</td> 
    <td>content for 1 and B</td> 
    <td>content for 2 and B</td> 
</tr> 
<tr> 
    <td>Heading C</td> 
    <td>content for 1 and C</td> 
    <td>content for 2 and C</td> 
</tr> 
</tbody> 
</table> 

И называют эту функцию

function Swap(){ 
    var t= document.getElementsByTagName('tbody')[0], 
    r= t.getElementsByTagName('tr'), 
    cols= r.length, rows= r[0].getElementsByTagName('td').length, 
    cell, next, tem, i= 0, tbod= document.createElement('tbody'); 

    while(i<rows){ 
     cell= 0; 
     tem= document.createElement('tr'); 
     while(cell<cols){ 
      next= r[cell++].getElementsByTagName('td')[0]; 
      tem.appendChild(next); 
     } 
     tbod.appendChild(tem); 
     ++i; 
    } 
    t.parentNode.replaceChild(tbod, t); 
} 

проверить его here

Answer 2

Возможно, вам нужно построить две таблицы и скрыть их непригодность каждый раз.

HTML:

<table> 
    <tr> 
     <th>(empty)</th> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
    </tr> 
<tr> 
    <th>Heading A</th> 
    <td>content for 1 and A</td> 
    <td>content for 2 and A</td> 
</tr> 
<tr> 
    <th>Heading B</th> 
    <td>content for 1 and B</td> 
    <td>content for 2 and B</td> 
</tr> 
<tr> 
    <th>Heading C</th> 
    <td>content for 1 and C</td> 
    <td>content for 2 and C</td> 
</tr> 
</table> 

<table style="display:none;"> 
    <tr> 
     <th>(empty)</th> 
     <th>Heading A</th> 
     <th>Heading B</th> 
     <th>Heading C</th> 
    </tr> 
<tr> 
    <th>Heading 1</th> 
    <td>content for 1 and A</td> 
    <td>content for 1 and B</td> 
    <td>content for 1 and C</td> 
</tr> 
<tr> 
    <th>Heading 2</th> 
    <td>content for 2 and A</td> 
    <td>content for 2 and B</td> 
    <td>content for 2 and C</td> 
</tr> 
</table> 

Обратите внимание на style: "display:none;" на втором столе.

Теперь все, что вам нужно сделать, - это таблицы Google, когда вы когда-либо будите. Допустим, вы хотите переключить на стол щелчок:

$('table').on('click', function() { 
    $('table').toggle(); 
}); 

Это решение предполагает, что ваш стол статичен. Тем не менее, это быстрый и легкий рабочий стол. Надежда, что помогает

PS: Вы можете проверить это here

Answer 3

function invertTable(table){ 

    var $table = $(table); 

    var invertedTable = []; 

    for(var i=0 ; i < $table.find('tr:first th').length ; i++){ 

    invertedTable.push([]); 

    } 

    $table.find('th,td').each(function(){ 
    invertedTable[$(this).index()].push($(this).text());  
    }) 

    var $newTable = $('<table></table>'); 

    for(var i=0 ; i < invertedTable.length ; i++){ 

    var $newTr = $('<tr></tr>'); 

    for(var j = 0 ; j < invertedTable[i].length ; j++){ 

     if(j == 0 || i == 0){ 
      $newTr.append('<th>'+invertedTable[i][j]+'</th>'); 
     } 
     else{ 
      $newTr.append('<td>'+invertedTable[i][j]+'</td>'); 
     } 

    } 

    $newTable.append($newTr); 
    } 

    $table.after($newTable) 
    $table.remove(); 
} 

http://jsfiddle.net/xybmoadx/1/

Answer 4

function transpose(arr){ 
    return Object.keys(arr[0]).map(function (c) { return arr.map(function (r) { return r[c]; }); }); 
} 
function transposeTable(table){ 
    var rows = []; 
    var tableString = ''; 
    table.find('tr').each(function(i,row){ 
     var rowArray = []; 
     row = $(row); 
     row.find('th,td').each(function(i,cell){ 
      cell = $(cell); 
      rowArray.push({ 
       value : cell.text(), 
       type : cell.is('th') ? 'th':'td' 
      }) 
     }) 
     rows.push(rowArray); 
    }); 
    rows = transpose(rows); 
    rows.forEach(function(row){ 
     tableString += '<tr>'; 
     row.forEach(function(cell){ 
      tableString += '<' + cell.type + '>'; 
      tableString += cell.value; 
      tableString += '</' + cell.type + '>'; 
     }) 
     tableString += '</tr>'; 
    }); 
    return tableString; 
} 

JSfiddle

Не чистый, но это работает.

Answer 5

Посмотрите на эту jsfiddle я создал для вас:

http://jsfiddle.net/carloscalla/yuhx2tgk/3/

Сохраняет значения ячейки таблицы в массивах и создает таблицу из них. Затем меняет порядок при нажатии кнопки.

HTML:

<div id="table-wrapper"></div> 
<button id="toggler">Toggler</button> 

JS:

var max_rows = 4; 
var a = new Array(); 
for (i = 0; i < max_rows; i++) 
    a[i] = new Array(); 

a[0][0] = "(empty)"; 
a[0][1] = "Heading 1"; 
a[0][2] = "Heading 2"; 

a[1][0] = "Heading A"; 
a[1][1] = "content 1 A"; 
a[1][2] = "content 2 A"; 

a[2][0] = "Heading B"; 
a[2][1] = "content 1 B"; 
a[2][2] = "content 2 B"; 

a[3][0] = "Heading C"; 
a[3][1] = "content 1 C"; 
a[3][2] = "content 2 C"; 

var direction = 0; 
// 0 for horizontal 
// 1 for vertical 

function changeDirection(){ 
    if (direction == 1) direction = 0; 
    else if (direction == 0) direction = 1; 
    resetTable(); 
} 
function resetTable(){ 
    var $table_body = $('<table><tbody></tbody></table>'); 

    if (direction == 0){ 
     for (x = 0; x < a.length; x++){ 
      $table_body.append('<tr></tr>'); 
      $last_row = $table_body.find('tr').last(); 
      for (v = 0; v < a[x].length; v++){ 
       $last_row.append('<td>' + a[x][v] + '</td>'); 
      } 
     } 
    } 
    else{ 
     for (x = 0; x < a[0].length; x++){ 
      $table_body.append('<tr></tr>'); 
      $last_row = $table_body.find('tr').last(); 
      for (v = 0; v < a.length; v++){ 
       $last_row.append('<td>' + a[v][x] + '</td>'); 
      } 
     }   
    } 

    $('#table-wrapper').html($table_body); 
} 
$('#toggler').on('click', changeDirection); 

Результаты таковы:

Оригинальная таблица:

Upd ованный стол:

Answer 6

Buid массив динамически из JavaScript. Это было бы самым простым способом сделать это ... а также сохранить его.

Скажем, многомерный массив [x] [y] представляет все, что вам нужно. [0] [0], очевидно, будет нулевой ...

Определите элемент таблицы в HTML дать ему идентификатор, скажем, «стол» ... В JavaScript тогда ...

Определение должно быть легко ...

var t = new Array(); 
t[0] = new Array(); 
t[0][0] = 'Heading 1'; 
t[0][1] = 'Heading 2'; 

и так далее ..

в случае документа Ready Jquery, вы можете инициализировать его ...

$(document).ready(function() { 
    for (var i = 0; i < t.length; i++) { 
     $('#table').append('<tr id=tr' + 0 + '></tr>'); 
     for (var j = 0; j < t[i].length; j++) { 
      if (i == 0) 
       $('#tr' + i).append('<th>' + t[i][j] + '</th>'); 
      else 
       $('#tr' + i).append('<td>' + t[i][j] + '</td>'); 
     } 
    } 

    var t_trans = t[0].map(function(col, i) { 
     return t.map(function(row) { 
      return row[i]; 
     }); 
    }); 
}); 

Я использовал код из этого ответа, чтобы транспонировать созданный массив и хранить его в другой переменной. Transposing a 2D-array in JavaScript

Теперь все, что вам нужно сделать, по щелчку «Транспонирование кнопку» в HTML, это удалить существующую разметку внутри «таблицы», и воссоздать его с помощью транспонирования массива .. поэтому во время события OnClick,

$('#table').empty(); 
for (var i = 0; i < t_trans.length; i++) { 
    $('#table').append('<tr id=tr' + 0 + '></tr>'); 
    for (var j = 0; j < t_trans[i].length; j++) { 
     if (i == 0) 
      $('#tr' + i).append('<th>' + t_trans[i][j] + '</th>'); 
     else 
      $('#tr' + i).append('<td>' + t_trans[i][j] + '</td>'); 
    } 
} 

Это должно сделать это ... Черт, вы можете даже сделать сложную функцию, принимая массив в качестве аргумента, чтобы сделать работу для вас, что-то вроде function populate(arr){} и вложенного цикла внутри ..

function populate(arr){ 
    for (var i = 0; i < arr.length; i++) { 
     $('#table').append('<tr id=tr' + 0 + '></tr>'); 
     for (var j = 0; j < arr[i].length; j++) { 
      if (i == 0) 
       $('#tr' + i).append('<th>' + arr[i][j] + '</th>'); 
      else 
       $('#tr' + i).append('<td>' + arr[i][j] + '</td>'); 
     } 
    } 
} 

и звонок populate(t) на готовом, populate(t_trans) после опорожнения его при нажатии кнопки.