Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2012, 16:51
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Как повернуть таблицу?
Не знаю, там ли я спрашиваю, если не там, то прошу отправить по адресу. В общем, я с помощью 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>

Наверняка есть готовое решение? Если нету, то подскажите, пожалуйста, куда копать? Условие, естественно, что количество строк неизвестно.
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2012, 17:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 04.08.2012 в 18:59.
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2012, 17:49
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Спасибо огромное! Все супер работает. Только старую таблицу прятать пришлось:
#test{
visibility: hidden;
}


и новую двигать соответственно:
#out{
    position: relative;
    top:-100px; 
}

Это Вы прямо сей час написали? Долго загуглить пытался - ничего подобного не нашел. С Вашего позволения добавлю в свой "золотой фонд скриптов, которые мне не повторить".
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2012, 17:53
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Iktash,
#test{
display:none;
}
И двигать не придется
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2012, 22:35
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Имхо, некрасиво.

Лучше так:
<!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>
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2012, 10:12
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Спасибо большое. Особой разницы в работе не нашел, так что использую первый вариант.
Возник еще вопросик: у меня первая строка была с 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);

Последний раз редактировалось Iktash, 05.08.2012 в 12:14.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Как удалить таблицу созданную в JS? konstantinopol Общие вопросы Javascript 9 10.09.2011 10:55
Как узнать, присутствует ли в окне полоса прокрутки или нет? возжаждавший Элементы интерфейса 6 12.03.2010 23:00
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56