Как повернуть таблицу?
Не знаю, там ли я спрашиваю, если не там, то прошу отправить по адресу. В общем, я с помощью php из mysql делаю запрос. В итоге могу вывести таблицу в которой каждый новый результат - это строка. Ну и собственно количество строк равно количеству результатов запроса. Позиций в таблице довольно много, а результат будет 2-3 строки.
Собственно вопрос, как вывести результаты столбцами? Т.е. в идеале хотелось бы такой скрипт, который принимает таблицу, что-то вроде: <table> <tr> <td>Заголовок1</td><td>Заголовок2</td><td>Заголовок3</td> </tr> <tr> <td>Результат1</td><td>Результат1</td><td>Результат1</td> </tr> <tr> <td>Результат2</td><td>Результат2</td><td>Результат2</td> </tr> </table> А выдаст: <table> <tr> <td>Заголовок1</td><td>Результат1</td><td>Результат2</td> </tr> <tr> <td>Заголовок2</td><td>Результат1</td><td>Результат2</td> </tr> <tr> <td>Заголовок3</td><td>Результат1</td><td>Результат2</td> </tr> </table> Наверняка есть готовое решение? Если нету, то подскажите, пожалуйста, куда копать? Условие, естественно, что количество строк неизвестно. |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<table id=test border="1">
<tr>
<td>Заголовок1-1</td><td>Заголовок1-2</td><td>Заголовок1-3</td>
</tr>
<tr>
<td>Результат2-1</td><td>Результат2-2</td><td>Результат2-3</td>
</tr>
<tr>
<td>Результат3-1</td><td>Результат3-2</td><td>Результат3-3</td>
</tr>
</table>
<script type="text/javascript">
var Out='<table id=out border="1" style="margin-top:1em;">\n';
$("#test tr:first td").each(function(i) {
Out+='<tr>\n';
$("#test tr").each(function() {
var a = $(this).find("td").eq(i);
Out+='<td>'+a.html()+'</td>\n';
}); Out+='</tr>\n';
});$("#test").after(Out+='</table>\n')
</script>
|
Спасибо огромное! Все супер работает. Только старую таблицу прятать пришлось:
#test{
visibility: hidden;
}
и новую двигать соответственно:
#out{
position: relative;
top:-100px;
}
Это Вы прямо сей час написали? Долго загуглить пытался - ничего подобного не нашел. С Вашего позволения добавлю в свой "золотой фонд скриптов, которые мне не повторить". |
Iktash,
#test{
display:none;
}
И двигать не придется |
Имхо, некрасиво.
Лучше так:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
table{border:1px solid #000}
</style>
</head>
<body>
<table onclick="rotate(this)" >
<tr>
<td>Заголовок1-1</td><td>Заголовок1-2</td><td>Заголовок1-3</td>
</tr>
<tr>
<td>Результат2-1</td><td>Результат2-2</td><td>Результат2-3</td>
</tr>
<tr>
<td>Результат3-1</td><td>Результат3-2</td><td>Результат3-3</td>
</tr>
<tr>
<td>Результат4-1</td><td>Результат4-2</td><td>Результат4-3</td>
</tr>
</table>
<script type="text/javascript">
function rotate( table ){
if(typeof table === 'string') table = document.getElementById(table);
var tr = table.rows,
i = tr.length,
j = tr[0].cells.length,
new_table = document.createElement('table');
while(j--){
for(var new_tr = new_table.insertRow(0), l = 0; l < i; l++ ){
new_tr.appendChild(tr[l].cells[j])
}
}
return table.parentNode.replaceChild(new_table,table)
}
</script>
</body>
</html>
|
Спасибо большое. Особой разницы в работе не нашел, так что использую первый вариант.
Возник еще вопросик: у меня первая строка была с id='top' т.к. там заголовки и подсвечивалась другим цветом. А возможно теперь так же столбец подсветить? Ну то есть как модифицировать этот код, что бы там, где было <tr id='top'> стали например <td class='top'>? Спасибо, разобрался. Придумал жуткие грабли, но, вроде работает
var removed = "<tbody>";
var newstr = "<tbody><colgroup><col class='alt'/></colgroup>";
var str = document.getElementById("out").innerHTML;
document.getElementById("out").innerHTML = str.replace(removed, newstr);
|
| Часовой пояс GMT +3, время: 11:52. |