单击事件，将图像从一个表放到另一个表中.Javascript、HTML

Onclick event to put an image from a table to another table. Javascript, HTML

本文关键字：另一个 HTML Javascript 一个 事件 图像 单击      更新时间：2023-09-26

我有两个表。一个表包含多个图像，另一个表为空。我想要的是，点击第一张桌子上的一张图片，就会得到那张图片，然后把它放在另一张桌子上，放大它的大小。

我的桌子是这样的：

<div>
        <table id="enlarged" width="530px" border="1">
            <tr>
                <th>Enlarged Picture.</th>
            </tr>
            <tr>
                <td>
                    <div id="div1"> </div>
                </td>
            </tr>   
    </div>
    <br/>
    <div>
        <table id="small" width="530px" border="1">
            <tr>
                <th>Click on picture to see it enlarged.</th>
            </tr>
            <tr>
                <td>
                    <img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
                    <img id="picture2" src="winter1.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
                    <img id="picture3" src="winter2.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
                    <img id="picture4" src="winter3.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
                    <img id="picture5" src="winter4.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
                </td>
            </tr>
        </table>
    </div>

我尝试过的：

function addPictureToTable(){
            var myPicture = document.getElementById("picture1");
            var table = document.getElementById("enlarged");
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            row.insertCell(0).innerHTML= myPicture;
        }

如果有帮助的话，我从第一张表中拍摄的照片可以放在一个简单的div中，而不需要第二张表。

首先，我应该问，当前代码有什么问题？其次，我建议将elementID作为addPictureToTable函数的参数，这样：

<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">

变为：

<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable("picture1");">

制作：

var myPicture = document.getElementById("picture1");

变成：

var myPicture = document.getElementById(elID);

另外，我不确定您为什么要使用table.insertRow（rowCount），除非您只是想每次单击都不断扩展表。我想你只想通过ID获取div1，然后对它执行.innerHTML。

哦，您可能想要删除插入到新div中的元素的onClick事件，可能还需要删除元素ID。。。也许最好在div中放一个img标签，并将要编辑的"放大"图像的src属性设置为单击的图像的src。

是的，再次查看您的代码，这肯定是您想要做的，生成一个具有自己的width/height属性的shell img标记，并动态设置src属性（现在，您正在包括源img的height/width属性，因此大小始终与第二个表中的大小相同）

我不知道你的最终应用程序是什么。。。但似乎一种更酷、更现代的方式是使用某种face-boxjquery插件。。

http://wowslider.com/rq/jquery-picture-slider/http://defunkt.io/facebox/

是你可以尝试的东西！

相关文章：