таблица

Noks · May 20, 2009

у меня есть такой код

<html>
<head>
<title>table</title>
<script type="text/javascript">
</script>
</head>
<body>
<table border="1">
<tr>
<td width="50" height="50" align="center">
1
</td>
<td width="50" height="50" align="center">
2
</td>
<td width="50" height="50" align="center">
3
</td>
<td width="50" height="50" align="center">
4
</td>
</tr>
<tr>
<td width="50" height="50" align="center">
5
</td>
<td width="50" height="50" align="center">
6
</td>
<td width="50" height="50" align="center">
7
</td>
<td width="50" height="50" align="center">
8
</td>
</tr>
<tr>
<td width="50" height="50" align="center">
9
</td>
<td width="50" height="50" align="center">
10
</td><td width="50" height="50" align="center">
11
</td>
<td width="50" height="50" align="center">
12
</td>
</tr>
<tr>
<td width="50" height="50" align="center">
13
</td>
<td width="50" height="50" align="center">
14
</td>
<td width="50" height="50" align="center">
15
</td>
<td width="50" height="50" align="center">
16
</td>
</tr>
</table>
</br>
</br>

<input type="button" name="1" value="изменить порядок">
</body>
</html>

как мне при помощи JavaScript скрипта строки поменять с со столбцами(чтоб первая строка стала первым столбцом итд)?

ZoNT · May 20, 2009

КАК: подумать головой, почитать про программирование на скрипте, почитать про DOM и... и написать самому!

Школьные/интститутские задания для того и задают, чтобы вы их сами решали.

Noks · May 20, 2009

КАК: подумать головой, почитать про программирование на скрипте, почитать про DOM и... и написать самому!
Школьные/интститутские задания для того и задают, чтобы вы их сами решали.

Просто бесценный совет ,Я первый день учу ява скрипт,сижу пятый час (http://www.intuit.ru/department/internet/jsbasics/1/) и читаю про яблочки, и про таблицы там и слова нету

P.S.какой вообще смысл был отвечать, если не хочешь мопочь

Edited May 20, 2009 by Noks

ZoNT · May 20, 2009

Смысл в том, что это форум. Форум - это место для общения, а не для помощи. Нужна помощь - нажми F1. Не помогло - думай головой. Не умеешь думать или не хочешь - плати деньги (иди в раздел вакансии и оставляй там задание).

Styx · May 20, 2009

Вот для случая транспонирования квадратной таблицы-матрицы с простым неформатированным текстовым содержимым.

Javascript:

<script type="text/javascript">
   function transpose(matrixId) {
	  var matr = document.getElementById(matrixId);
	  var rowCount = matr.getElementsByTagName("tr").length;
	  var colCount = matr.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
	  var currRow = null;
	  var currCell = null;
	  var oppositeCell = null;
	  var cellText = "";
	  for (var i = 0; i < rowCount; i++) {
		 currRow =  matr.getElementsByTagName("tr")[i];
		 for (j = i + 1; j < colCount; j++) {
			currCell = currRow.getElementsByTagName("td")[j];
			cellText = currCell.firstChild.data;
			oppositeCell = matr.getElementsByTagName("tr")[j].getElementsByTagName("td")[i];
			currCell.firstChild.data = oppositeCell.firstChild.data;
			oppositeCell.firstChild.data = cellText;
		 }
	  }
   }
</script>

XHTML:

<form action="#" method="post">
   <table border="2" rules="all" id="matrix">
	  <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr>
	  <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr>
	  <tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr>
	  <tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr>
	  <tr><td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td></tr>
   </table>
   <input type="button" onclick="transpose('matrix');" value="transpose" />
</form>

Для прямоугольной матрицы сами напишите? =)

P.S. Если содержимое ячеек — форматированный текст или что-то еще, то всюду вместо атрибутов firstChild.data следует прописать атрибут innerHTML.

Edited May 20, 2009 by Styx

Noks · May 20, 2009

Styx спасибо все работает! теперь буду разбираться как именно

Riim · May 25, 2009

То, что здесь было, уже удалено)

Edited July 20, 2009 by Riim

s0rr0w · May 25, 2009

Клевая задачка.

Вечером сделаю свой вариант.

Кто-то хочет еще решить?

Styx · May 25, 2009

На всякий случай вот еще функция транспонирования произвольной прямоугольной таблицы (матрицы). При транспонировании стиль каждой из ячеек (будь то фон, формат и проч.) полностью переносится вместе с ячейкой (а не только переносится свойство innerHTML, как в примере выше). Делал себе в "удовольствие", но, может, понадобится кому еще. =)

Javascript:

<script type="text/javascript">
   function transposeMatrix(matrixId) {
	  var matr = document.getElementById(matrixId);
	  var rowCount = matr.rows.length;
	  var colCount = matr.rows[0].cells.length;
	  var transposedMatrix = matr.cloneNode(10);
	  while (transposedMatrix.rows.length > 0) {
		 transposedMatrix.deleteRow(0);
	  }
	  for (var i = 0; i < colCount; i++) {
		 transposedMatrix.insertRow(i);
		 for (var j = 0; j < rowCount; j++) {
			transposedMatrix.rows[i].appendChild(matr.rows[j].cells[i].cloneNode(10));
		 }
	  }
	  matr.parentNode.insertBefore(transposedMatrix, matr);
	  matr.parentNode.removeChild(matr);
   }
</script>

XHTML:

<form action="#" method="post">
   <table border="2" rules="all" id="matrix">
	  <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td style="font-weight: bold;">1.5</td></tr>
	  <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr>
	  <tr><td>3.1</td><td style="color: red;">3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr>
	  <tr><td>4.1</td><td bgcolor="#00FF00">4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr>
	  <tr><td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td></tr>
	  <tr><td>6.1</td><td>6.2</td><td>6.3</td><td>6.4</td><td>6.5</td></tr>
   </table>
   <input type="button" onclick="transposeMatrix('matrix');" value="transpose" />
</form>

Edited May 25, 2009 by Styx

s0rr0w · May 25, 2009

А вот и мой вариант.

 	var transpone = function ( id ) {
 		try {
 			var table = document.getElementById( id );

 			var trArr = table.rows;
 			var l = trArr.length;

 			var tmpTBODY = document.createElement("TBODY");


 		} catch ( e ) { return false };

 		for ( var i=0; i<l; i++ ) {	

 			var j = 0
 			while ( trArr[i].cells.length ) {
 				try {
 					tmpTBODY.rows[j].appendChild( trArr[i].cells[0] );
 					j++;
 				} catch ( e ) {
 					tmpTBODY.appendChild( document.createElement( "TR" ) );
 				}
 			}

 		}

		table.innerHTML = "";
 		table.appendChild( tmpTBODY );

 	};

<table id="testTable" border="1">
		<tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr>
		<tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr>
		<tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr>
	</table>
	<a href="#" onclick="transpone( 'testTable' ); return false;">Transpone</a>

Styx, убери в первой TR половину TD и запусти свой скрипт.

Edited May 25, 2009 by s0rr0w

Styx · May 26, 2009

Styx, убери в первой TR половину TD и запусти свой скрипт.

Угу, транспонирование с усечением!

s0rr0w, а ваш пример почему-то повергает IE6 в аут (приходится вырубать осла через Диспетчер задач...) В остальных браузерах работает блестяще.

s0rr0w · May 26, 2009

Угу, транспонирование с усечением!

раньше я бы тоже брал бы первый элемент, сейчас уже не допускаю таких вариантов.

s0rr0w, а ваш пример почему-то повергает IE6 в аут (приходится вырубать осла через Диспетчер задач...) В остальных браузерах работает блестяще.

А что за браузер такой, IE6? Новый наверное? IE7 знаю, IE8 знаю, IE6....

s0rr0w · May 26, 2009

Что, больше никто не желает выдать свой вариант решения задачи?

s0rr0w · May 26, 2009

Кстати, я посмотрел, в ИЕ действительно скрипт впадает в кому.

И происходит это потому, что IE не может корректно перенести TD в TBODY, если тот не добавлен в структуру документа.

Второй баг, который есть у ИЕ, это требование создания идеальной структуры таблицы.

Вот этот код не сделает ничего

<div id="container"></div>

var tmpTable = document.createElement( "TABLE" );
var tmpTR = document.createElement( "TR" );
var tmpTD = document.createElement( "TD" );
var tmpText = document.createTextNode( "Cell1");

var c = document.getElementById("container");
c.appendChild( tmpTable );
tmpTable.appendChild( tmpTR );
tmpTR.appendChild( tmpTD );
tmpTD.appendChild( tmpText );
alert( c.innerHTML)

А вот этот код ИЕ отработает как надо

var tmpTable = document.createElement( "TABLE" );
var tmpTBODY = document.createElement( "TBODY" );
var tmpTR = document.createElement( "TR" );
var tmpTD = document.createElement( "TD" );
var tmpText = document.createTextNode( "Cell1");

var c = document.getElementById("container");
c.appendChild( tmpTable );
tmpTable.appendChild( tmpTBODY );
tmpTBODY.appendChild( tmpTR );
tmpTR.appendChild( tmpTD );
tmpTD.appendChild( tmpText );
alert( c.innerHTML)

Вот модифицированная функция, работает в ИЕ

	var transpone = function ( id ) {
		try {
			var table = document.getElementById( id );

			var trArr = table.rows;
			var l = trArr.length;
			var tmpTBODY = table.appendChild( document.createElement("TBODY") );


		} catch ( e ) { return false };

		for ( var i=0; i<l; i++ ) {	

			var j = 0;

			while ( trArr[i].cells.length ) {
				try {
					tmpTBODY.rows[j].appendChild( trArr[i].cells[0] );
					j++;
				} catch ( e ) {
					tmpTBODY.appendChild( document.createElement( "TR" ) );
				}
			}

		}

		while( table.childNodes.length > 1 ){ table.removeChild( table.childNodes.item(0) ) };

	};

Styx · May 26, 2009

s0rr0w, если не против, то еще раз по поводу этого:

убери в первой TR половину TD и запусти свой скрипт

А вы со своим скриптом так пробовали? Кажется, транспонируется неправильно. В общем, результат повторного (т.е. двукратного) транспонирования не совпадает с начальным. А должен. =)

s0rr0w · May 26, 2009

s0rr0w, если не против, то еще раз по поводу этого:
А вы со своим скриптом так пробовали? Кажется, транспонируется неправильно. В общем, результат повторного (т.е. двукратного) транспонирования не совпадает с начальным. А должен. =)

Угу. Баг подтвержден.

Подумаю над новым алгоритмом.

Nekromancer · May 27, 2009

интересно, но мой пьяный бошка не соображает, так что воздержусь пока..

В общем, результат повторного (т.е. двукратного) транспонирования не совпадает с начальным. А должен. =)

а у меня работает.. хз

s0rr0w · May 27, 2009

интересно, но мой пьяный бошка не соображает, так что воздержусь пока..
а у меня работает.. хз

Удалять из первой строки половину элементов пробовал?

Nekromancer · May 27, 2009

ну а кто будет опускать вот так ячейки..

скорее всего они будут пустые.. или вообще кол спал и ров спан бдует..(который наверно тоже поламает таблицу)

s0rr0w · May 27, 2009

ну а кто будет опускать вот так ячейки..
скорее всего они будут пустые.. или вообще кол спал и ров спан бдует..(который наверно тоже поламает таблицу)

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

Noks · May 28, 2009

Ух ты как за неделю тема разрослась)))

был один вариант теперь вон сколько, спасибо

s0rr0w · May 28, 2009

Ух ты как за неделю тема разрослась)))
был один вариант теперь вон сколько, спасибо

Тебе они мало помогут. Они все содержат ошибку

Sign In

таблица

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information