Javascript 节点和函数使用

发布于 2025-01-06 22:10:20 字数 1144 浏览 0 评论 0原文

我有一张有四行的表，每行都有一个“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 函数的使用对我来说是新的。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初雪 2025-01-13 22:10:20

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

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

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

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

祝你好运。

回复收藏 0 原文

Bonjour°[大白 2025-01-13 22:10:20

你似乎想做类似的事情：

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

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>

回复收藏 0 原文

~没有更多了~