我知道这听起来很基本，但我是Javascript的新手。
这是我的问题：我有两个表 - Table1只有一个单元格，table2有一行和4列，包含4个图像（可点击）。我想要做的是当我点击任何图像时，它应该转到Table1的单元格。如果我点击另一个图像（在表2中），它应该用第二个图像替换Table1中的第一个图像。
我认为我们在Javascript中需要两种方法 - 一种用于移动图像，另一种用于检索表格单元格中的图像。
任何帮助都会有所帮助。
答案 0 :(得分：1)
$('#table1 tr td').click(function(){
$('#table2 tr td').html(this.html());
});
的Javascript
在tabl1的每个td上定义onclick="copyimage(this.innerHTML)"
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
}
答案 1 :(得分：1)
我会在没有为你编写代码的情况下引导你完成它。
假设您有两个表，tableA和tableB。他们都会tbody tr *。
tableA只会有td个单元格; tablB will have four td` cells。
* tr是＆＃34;表格行＆＃34;，td是table data，因为表格大部分都是为了保存数据而设计的。
使用Document Object Model (DOM)方法，您需要在文档对象中查找并选择元素的DOM节点。为此，最简单的方法是在您尝试查找的元素上添加id属性。请注意，id属性对于页面应该是唯一的（没有欺骗！）。这意味着<img id="imageLanding" src="...">和<img id="image1" src="...">，<img id="image2" src="...">等是img元素的最终结果。
旁注：HTML5允许id为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元素具有属性（＆＃34;属性＆＃34;含义略有不同）和方法。例如，img元素将具有src="..."属性，在这种情况下，element.src DOM元素上具有相应的img属性。该属性是页面装入时为解析器提供的属性，属性是属性作为DOM节点在元素中的属性。在某些情况下，访问的属性可能不会以您想象的方式更新，这就是区别的原因。
接下来，花一点时间考虑使用您对事件的描述会发生什么。有人将显示两个表，并且单击图像的选项将提供给他们，之后该功能将< strong>交换点击的图片与另一张桌子的一张图片。粗体文本可识别操作发生的任何位置，无论是在设置还是执行中。 （删除其中的点击图像td并在删除其他图像后将其移动到另一个表格是另一种方法;我在此处没有证明这一点。）
所以你必须等待＆＃34;某事＆＃34;在演戏前发生。这个＆＃34;东西＆＃34;是event。所有DOM元素都支持某种类型的事件（不是所有相同的事件都发生在每种类型的元素上），这允许你在事情发生时做 ：ONclick，{{1 }}，ONmouseover等。它＆＃34; on＆＃34;发生的事件。考虑：
从学校回家后，我吃了三明治。
注意，如果您使用属性或直接DOM属性来设置包含元素的事件处理程序，则需要将ONmouseout附加到每个事件名称。换句话说，on，onclick和onmouseover，用于在提交表单元素之前使用它们。
使用DOM方法（首选onsubmit）在实践中意味着：
onclick="stuff()"您看到的函数形式称为变量函数，当以这种方式使用时，将值返回到其左侧的变量或属性。这样做可以让您使用变量名称调用该函数，并添加element.onclick = function(){};`
，即()或此处所示myVar.myFunc()。
请注意，还有另一种方式（＆＃34;更好的＆＃34;在一定程度左右）的方式来＆＃34;附加＆＃34;对元素的事件，但我不想让你混淆太多的选择。您还可以使用element.onclick()格式声明，然后使用它的引用，例如function name(){}。请注意，执行此操作时，不使用element.onclick = name; 。否则，您立即调用该函数并将其返回结果传递给变量。在大多数情况下，你不想这样做。
现在，您可以大致了解两个表的标记和＆＃34;事件＆＃34;的布局。将两者结合起来，我们有五个带标识符的元素。用于查找这些元素的DOM方法是：
()在其中输入不同的id，您将获得对元素的DOM节点的引用。此时，您可以操纵它，从属性值中获取内容，并为其分配一个特殊事件，该事件被告知＆＃34;处理＆＃34;该事件发生在该元素上的事件。例如：
var img1 = document.getElementById('image1');
或者传递函数声明对事件处理程序属性的引用：
img2.onclick = function(){
alert('You clicked image ' + this.id);
};
如果使用DOM元素属性设置事件处理程序，则可以使用该函数内部的function alertID(){
alert('You clicked image ' + this.id);
};
img2.onclick = alertID;
进行自引用，即获取有关调用该函数的元素的信息。 当时的那个功能你在＆＃34; context＆＃34;那个元素。
使用标记属性来附加事件处理程序，你最终会遇到这个问题，这很无聊而且不那么有趣：
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;
};
标记中为自己的表格添加了标记，您已了解自己需要＆＃34;通过操作跟踪事件＆＃34;包含在函数中，并且您知道需要执行某些事情来交换图像。
关于页面加载和解析的说明。当页面加载时，如果您尝试运行脚本来调用元素，那么该元素必须在页面加载时以解析顺序（从上到下）位于脚本之前，或者您必须等到页面最初被解析在构建DOM之后，现在你想要的任何元素，你可以自由访问（或多或少）。 jQuery和其他语言使用自定义body事件，但该事件实际上并不作为方法存在于DOM中。
因此，您无法在普通DOM中使用该ready业务。您可以使用的是：
onready解析页面后会触发。 window.onload = function(){};
可能会在onready之前或之后触发，因为它通过独立监控其他内容来检测DOM是否已准备就绪。对于常规DOM方法，此时不要担心。
解析了两个受影响的onload标记并将其转换为DOM元素。所以你知道你可以选择它们（使用img属性和DOM文档方法），将它们保存到变量或对象/元素属性，然后......鼓roll ...你可以访问属性和方法在该元素上也可以使您的预期结果发生。
现在，页面已加载，标记已解析，您有一个脚本在id事件被触发时运行，现在是什么？好吧，你编写代码。当鼠标点击你特别告诉他们的一个元素时你想要做什么＆＃34;处理＆＃34;是：
onload它或多或少。我知道这听起来很多，但是你做的次数越多越容易。您尝试做的有几种方法可以实现（例如在CodeAddict演示中交换DOM中的元素的父标记值），但这是迄今为止最简单的方法，几乎是相同的效果（为了您的目的，相同）。
一旦你学到了更多东西，你就可以在你的代码中做一些事情，比如动态搜索，检测和操作事件以及在元素上执行的其他相关操作，而不必事先了解它们。
但是现在不要担心这个级别。试试这个。然后使用MDN's tutorials。
答案 2 :(得分：1)
$('#table1 tr td img').click(function()
{
$(this).clone().appendTo($('#table2 tr td'))
$(this).remove();
})