0

我知道这听起来很基础，但我是 Javascript 新手。

这是我的问题：我有两个表格 - Table1 只有一个单元格，table2 有一行 4 列，包含 4 张图像（可点击）。我想要做的是当我单击任何图像时，它应该转到 Table1 的单元格。如果我单击另一个图像（在 Table2 中），它应该用第二个图像替换 Table1 中的第一个图像。

我认为我们在 Javascript 中需要两种方法——一种用于移动图像，另一种用于检索表格单元格中的图像。

任何帮助总是有帮助的。

4

3 回答 3

1 
$('#table1 tr td').click(function(){
$('#table2 tr td').html(this.html());    

});

Javascript

onclick="copyimage(this.innerHTML)"在 table1 的每个 td 上定义

function copyimage(thehtml)
{
 var x=document.getElementById("table2ID").rows[0].cells;//you can replace 0 with row index if you have more than one rows

 x[0].innerHTML=this.innerHTML;//you can replace 0 with cell index if you have more than one cells

}
于 2012-06-20T06:26:24.203 回答
1

我将引导您完成它而不为您编写代码。

假设您有两张桌子，tableA并且tableB. 他们都有一个tbody带tr*的。 tableA将只有一个td单元格；tablB will have fourtd`细胞。

*tr是“表格行”，因为表格的设计大部分是为了保存数据 td。table data

使用文档对象模型 (DOM)方法，您需要在文档对象中查找并选择元素的 DOM 节点。为此，最简单的方法是将id属性放在您要查找的元素上。请记住，id页面的属性应该是唯一的（不要欺骗！）。这意味着<img id="imageLanding" src="...">and <img id="image1" src="...">,等是元素<img id="image2" src="...">的最终结果。img

旁注：HTML5 允许ids 为id="1"，但我认为这是一种不好的做法，建议不要使用这种形式。这是原则性的事情。

至此，您应该拥有近似于：

table
    tbody
        tr
            td
                img id="imageLanding"
table
    tbody
        tr
            td
                img id="image1"
            td
                img id="image"
            td
                img id="image3"

... etc ...

DOM 元素具有属性（“属性”的含义略有不同）和方法。例如，一个img元素将具有一个src="..."属性，在这种情况下，该element.src属性在imgDOM 元素上具有相应的属性。属性是您在页面加载时给解析器的内容，而属性是属性在元素中作为 DOM 节点的内容。在某些情况下，访问的属性可能不会以您想象的方式更新，这就是存在区别的原因。

接下来，花点时间考虑使用您对事件的描述会发生什么。有人将看到两张桌子，并提供点击一张桌子中的图像的选项，然后该功能会将点击的图像与另一张桌子的一张图像交换。粗体文本标识操作发生的任何地方，无论是在设置中还是在执行中。（从其中删除单击的图像并在删除另一个图像后将其移动到另一个表是另一种方法；我在这里不演示）。td

所以你必须等“某事”发生后才能行动。这个“东西”是一个事件。所有 DOM 元素都支持某种类型的事件（但并非所有相同的事件都发生在每种类型的元素上），这允许您在发生某些事情时执行某些操作：ONclick、、、ONmouseover等ONmouseout。它正在“发生”一个事件。考虑：

放学回家后，我吃了一个三明治。

请注意，如果您使用属性或直接 DOM 属性来设置带有元素的事件处理程序，则需要附加on到每个事件名称。换句话说，onclick,onmouseover和onsubmit, 用于在提交表单元素之前对其进行处理。

使用 DOM 方法（首选onclick="stuff()"）在实践中意味着：

element.onclick = function(){};`

你看到的那种形式的函数称为变量函数，当以这种方式使用时，它会返回一个值给它左边的变量或属性。这样做允许您使用变量名称调用该函数并()添加，即，myVar.myFunc()或如此处所述，element.onclick()。

请注意，还有另一种（在一定程度上“更好”）将事件“附加”到元素的方式，但我不想用太多的选项混淆您。您还可以使用function name(){}格式声明，然后使用它的引用，例如element.onclick = name;. 请注意，当我这样做时，no ()​​are used。否则，您将立即调用该函数并将其返回的结果传递给变量。在大多数情况下，您不想这样做。

现在，您对两个表的标记和“事件”的布局有了大致的了解。将两者结合起来，我们有五个带有标识符的元素。查找这些元素的 DOM 方法是：

var img1 = document.getElementById('image1');

将不同的 id 输入其中，您将获得对元素 DOM 节点的引用。此时，您可以操纵它，从中获取属性值等内容，并为其分配一个特殊事件，当该事件发生在该元素上时，该事件被告知“处理”该事件。例如：

img2.onclick = function(){
    alert('You clicked image ' + this.id);
};

或者将函数声明的引用传递给事件处理程序属性：

function alertID(){
    alert('You clicked image ' + this.id);
};

img2.onclick = alertID;

如果您使用 DOM 元素属性设置事件处理程序，则可以使用this该函数内部进行自引用，即获取有关调用该函数的元素的信息。当时在该函数内部，您处于该元素的“上下文”中。

使用标签属性来附加事件处理程序，你最终会得到这个很无聊而且不那么有趣的东西：

<img id="image1" onclick="whyme(this)"/>

function whyme(el){
    alert('You clicked image ' + el.id);
};

或者，也许不是致命但肯定很痛苦，传递一个“识别”你的元素的值：

<img id="image1" onclick="whyme('image1')"/>

function whyme(id){
    alert('You clicked image ' + document.getElementById('id').id;
};

当然是迂回。

所以在这一点上，你必须把这些部分放在一起。你的标签中有你的表的body标记，你知道你需要在一个函数中“跟随一个带有动作的事件”，你知道你需要做一些事情来交换图像。

关于页面加载和解析的说明。在页面加载时，如果您尝试运行脚本来调用元素，则该元素必须在页面加载时按解析顺序（从上到下）位于脚本之前，或者您必须等到页面最初被解析，之后构建 DOM，现在您可以随意访问任何元素（或多或少）。jQuery 和其他语言使用自定义ready事件，但该事件实际上并不作为方法存在于 DOM 中。

所以你不能onready在纯 DOM 中使用该业务。您可以使用的是：

window.onload = function(){};

这将在页面被解析后触发。onready可能会在 before 或 after 触发onload，因为它通过独立监控其他东西来检测 DOM 是否准备好。对于常规的 DOM 方法，此时不要担心。

两个受影响的img标签被解析并转换为 DOM 元素。所以你知道你可以选择它们（使用id属性和 DOM 文档方法），将它们保存到变量或对象/元素属性中，然后......鼓声......你也可以访问该元素上的属性和方法使您的预期结果发生。

现在，页面已经加载，标记被解析，当onload事件被触发时，你有一个脚本要运行，现在呢？好吧，你写代码。当鼠标单击您告诉特别“处理”的元素之一时，您想要做的是：

[Function swapImages() is called and executed when mouse is clicked]
    Get the imageLanding element reference

    With the imageLanding element's reference
        Set a variable to be equal to the img tag's src attribute, img.src

    Using the clicked element's reference (hopefully this)...
        Set the imageLanding's img.sr equal to the clicked element's src attribute

    Set the clicked element's this.src = the saved value you put in the variable 

    return to the awaiting events state
[Function ends]

就是这样，或多或少。我知道这听起来很多，但是你做的次数越多就越容易。您尝试做的有几种到达那里的方法（例如在 DOM 中交换元素的父标记值，如 CodeAddict 所示），但这是迄今为止最简单的方法并且具有几乎相同的效果（对于您的目的， 相同）。

一旦你了解了更多，你就可以在你的代码中做一些事情，比如动态地寻找、检测和操作事件以及对元素执行的其他相关操作，而无需事先了解太多或任何关于它们的信息。

但现在不要担心那个级别。试试这个。然后使用MDN 的教程。

于 2012-06-20T07:09:09.657 回答
1 
$('#table1 tr td img').click(function()
{
  $(this).clone().appendTo($('#table2 tr td'))
  $(this).remove();
})
于 2012-06-20T07:14:18.200 回答