Javascript节点和函数使用

Javascript nodes and functions use

本文关键字：函数 节点 Javascript      更新时间：2023-09-26

我有一个有四行的表，每行都有一个"id"，每行内部都有一条文本链接。

我想将单击的链接的innerHTML更改为下一个链接innerHTML。

所以如果我有这个：

ONE
TWO
THREE
FOUR

例如，我点击两个，结果一定是：

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函数的使用对我来说是新的。

代码如何知道单击了哪个链接？如果你不告诉它，它就无法神奇地推断出来。

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

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

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

祝你好运。

您似乎想做一些类似的事情：

<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>
相关文章：