Форум

Iktash · #1 (**permalink**) 04.08.2012, 16:51

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

Наверняка есть готовое решение? Если нету, то подскажите, пожалуйста, куда копать? Условие, естественно, что количество строк неизвестно.

Deff · #2 (**permalink**) 04.08.2012, 17:15

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

Iktash · #3 (**permalink**) 04.08.2012, 17:49

Спасибо огромное! Все супер работает. Только старую таблицу прятать пришлось:

#test{
visibility: hidden;
}

и новую двигать соответственно:

#out{
    position: relative;
    top:-100px; 
}

Это Вы прямо сей час написали? Долго загуглить пытался - ничего подобного не нашел. С Вашего позволения добавлю в свой "золотой фонд скриптов, которые мне не повторить".

Deff · #4 (**permalink**) 04.08.2012, 17:53

Iktash,

#test{
display:none;
}

И двигать не придется

Aetae · #5 (**permalink**) 04.08.2012, 22:35

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

Лучше так:

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

Iktash · #6 (**permalink**) 05.08.2012, 10:12

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

Форум

Справочник

Discord чат

Курсы javascript