Question

我有一个包含四行的表，每一行都有一个“id”，每个链接里面都有一个文本。

我想用下一个链接innerHTML更改点击链接的innerHTML。

所以，如果我有这个：

ONE
TWO
THREE
FOUR

我单击TWO例如，结果必须是：

ONE
THREE 
TWO
FOUR

如下所示，我的代码已经改变了两个第一个链接的顺序，但是如果我点击另一个链接，它就会一样。

<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>

我整天都在研究这个问题，我看不出还能做些什么。我从Java和Javascript开始，所以使用数组和DOM和Javascript函数对我来说是新的。

Answer 1

代码如何知道点击了哪个链接？如果你不告诉它，就不能神奇地推断它。

首先，删除所有id属性。它们在这里没有用处，只会导致混乱。

接下来，将this作为change的第一个参数传递：onclick="change(this);"和function change(link) {...}。

现在，重写您的change函数，找到更改link的正确链接，并按现在的方式进行交换。

祝你好运。

Answer 2

您似乎想要执行以下操作：

<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>

Javascript节点和函数使用

2 个答案: