Форум

happy_Mikhail · #1 (**permalink**) 31.10.2013, 15:45

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

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

вопрос устройства на работу

danik.js · #2 (**permalink**) 31.10.2013, 15:53

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

happy_Mikhail · #3 (**permalink**) 31.10.2013, 16:00

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

ksa · #4 (**permalink**) 31.10.2013, 16:20

Сообщение от happy_Mikhail

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

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

happy_Mikhail · #5 (**permalink**) 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);
}

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

рони · #6 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript