0

I have a table with four rows, each one with an "id", and inside each one link with a text.

I want to change the innerHTML of the clicked link with the next one link innerHTML.

So if I have this:

ONE
TWO
THREE
FOUR

and I click on TWO for example, the result must be:

ONE
THREE 
TWO
FOUR

As follows my code, which already change the order of the two first links, but it does the same if I click another link.

<html>
<head>
<script type="text/javascript">
function change()
{
var link = document.getElementsByTagName("a");
var i = 0;
var aux = link[i].innerHTML;
link[i].innerHTML = link[i+1].innerHTML;
link[i+1].innerHTML = aux;
}
</script>
</head>
<body>
<table border="1">
<tr id="1"><td><a href="#" onclick="change()">ONE</a></td></tr>
<tr id="2"><td><a href="#" onclick="change()">TWO</a></td></tr>
<tr id="3"><td><a href="#" onclick="change()">THREE</a></td></tr>
<tr id="4"><td><a href="#" onclick="change()">FOUR</a></td></tr>
</table>
</body>
</html>

I've been working on this all day and I can't see what else can I do. I'm starting with both Java and Javascript, so the use of arrays and the DOM and Javascript functions is new to me.

1
  • What should happen if 'four' is clicked? Assuming the order is still one two three four? Feb 19, 2012 at 19:50

2 Answers 2

0

How does the code know which link was clicked? If you don't tell it, it can't deduce it magically.

First off, remove all those id attributes. They serve no purpose here and will only lead to confusion.

Next, pass this as the first argument of change: onclick="change(this);" and function change(link) {...}.

Now, rewrite your change function to find the right link to change link with, and do the swap as you are now.

Good luck.

3
  • Ok I will try... I assume the id's have no purpose and I know that my teacher wants to confuse us..... Feb 19, 2012 at 20:04
  • Well, IDs should id entify things. Something like tablerow1 could work as an identifier, because then you know what it is. Just 1 alone could mean anything. Feb 19, 2012 at 20:10
  • so if I use the event onclick="change(this)" the function know what is the row to change, I can do something like getEelementsByTagName("tr") and we have an array with 4 elements, but how does the function knows where I clicked?? Feb 19, 2012 at 20:56
0

You seem to want to do something like:

<style type="text/css">
.shifter {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>

<script>

function shiftRows(e) {
  var el = e.target || e.srcElement;
  var row, tbody;

  if (el.tagName.toLowerCase() == 'span' && el.className == 'shifter') {
    row = el.parentNode.parentNode;
    tbody = row.parentNode;

    if (row.rowIndex > 0) {
      tbody.insertBefore(row, tbody.rows[row.rowIndex - 1]);
    }
  } 
}

</script>

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.