Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Поменять местами элементы tr (https://javascript.ru/forum/dom-window/42550-pomenyat-mestami-ehlementy-tr.html)

happy_Mikhail 31.10.2013 15:45

Поменять местами элементы tr
 
Здравствуйте.
сразу оговорюсь, что мои знания в JS почти никакие, а задачу решить нужно.

Задача: Есть табличка и возможность динамически добавлять в неё поля. так же есть возможность присваивать id(шники) элементам.
вот и нужно сделать так чтобы при щелчке на кнопку менялись местами
1 и 2 элементы, ну и соответственно 2 и 3 и т.д
:help:
вопрос устройства на работу

danik.js 31.10.2013 15:53

tbody.insertBefore(tr3, tr2);
Первым аргументом идет вставляемый узел, вторым - узел, перед которым находится позиция вставки. То есть вставляем третью строку перед второй.

happy_Mikhail 31.10.2013 16:00

А, что бы назад вернуть?

ksa 31.10.2013 16:20

Цитата:

Сообщение от happy_Mikhail
А, что бы назад вернуть?

Выполнить то же еще раз. :D

happy_Mikhail 31.10.2013 16:35

вот смотрите у меня оч простой код который работает в " одну ссторону"
function change()
{
	var tr1,tr2;
	if(!(tr1=document.getElementById("tr1"))||!(tr2=document.getElementById("tr2")))
		return;
   
	tr2.parentNode.insertBefore(tr1,tr2);
}


А вот что забыл, у меня всего одна кнопка. То есть и поднять и опустить всё одной кнопкой

рони 31.10.2013 16:49

happy_Mikhail,
берите строки по индексу а не по id и будет вам счастье
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
   function change()
  {
    var tr1,tr2;
    if(!(tr1=document.getElementsByTagName('tr')[0])||!(tr2=document.getElementsByTagName('tr')[1]))
        return;
    tr2.parentNode.insertBefore(tr2,tr1);
  }
  </script>
</head>

<body>
  <table>
    <tr>
      <td>1</td>
    </tr>

    <tr>
      <td>2</td>
    </tr>

    <tr>
      <td>3</td>
    </tr>

    <tr>
      <td>4</td>
    </tr>

    <tr>
      <td>5</td>
    </tr>

    <tr>
      <td>6</td>
    </tr>
  </table>

  <form>
    <input name="" type="button" value="go" onclick="change()">
  </form>
</body>
</html>


Часовой пояс GMT +3, время: 18:39.