Использование узлов и функций Javascript

У меня есть таблица с четырьмя строками, каждая с "id" и внутри каждой ссылки с текстом.

Я хочу изменить innerHTML кликнутой ссылки со следующей ссылкой innerHTML.

Поэтому, если у меня есть это:

ONE
TWO
THREE
FOUR

и я нажимаю на TWO, например, результат должен быть:

ONE
THREE 
TWO
FOUR

Как и мой код, который уже меняет порядок двух первых ссылок, но он делает то же самое, если я нажму другую ссылку.

<table border="1">
<tbody><tr id="1"><td><a href="#" onclick="change()" target="_blank">ONE</a></td></tr>
<tr id="2"><td><a href="#" onclick="change()" target="_blank">TWO</a></td></tr>
<tr id="3"><td><a href="#" onclick="change()" target="_blank">THREE</a></td></tr>
<tr id="4"><td><a href="#" onclick="change()" target="_blank">FOUR</a></td></tr>
</tbody></table>

Я работаю над этим весь день, и я не вижу, что еще я могу сделать. Я начинаю как с Java, так и с Javascript, поэтому использование массивов и функций DOM и Javascript для меня нова.

2 ответа

Как код знает, какая ссылка была нажата? Если вы не скажете об этом, это не может сделать это волшебным путем.

Прежде всего, удалите все эти атрибуты id. Здесь они не служат никакой цели и приведут лишь к путанице.

Затем передайте this как первый аргумент change: onclick="change(this);" и function change(link) {...}.

Теперь перепишите свою функцию change чтобы найти нужную ссылку для изменения link, и сделайте своп, как сейчас.

Удачи.


Кажется, вы хотите сделать что-то вроде:

<table id="t0" onclick="shiftRows(event);">
 <tbody><tr><td><span>0</span>
 </td></tr><tr><td><span>1</span>
 </td></tr><tr><td><span>2</span>
 </td></tr><tr><td><span>3</span>
</td></tr></tbody></table>

licensed under cc by-sa 3.0 with attribution.