javascript - onclick 事件将图像从一个表放到另一个表中。 Javascript, HTML

Question

我有两张 table 。一个表包含多个图像，另一个是空的。我想要的是单击第一个表中的一个图像将拍摄该图像并将其放在另一个表上以放大其大小。

这是我的表格的样子:

<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 中，而不需要第二个表格。

Answer 1

首先，我想问一下，您当前的代码有什么问题？其次，我建议将 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，然后在该 ID 上执行 .innerHTML。

哦，您可能想删除插入到新 div 中的元素的 onClick 事件，可能还有元素 ID...也许最好只在 div 中放置一个 img 标签，然后设置您要编辑的“放大”图像的 src 属性是被点击图像的 src。

是的，再看看你的代码，这绝对是你想要做的，生成一个 shell img 标签，它有自己的宽度/高度属性，然后动态设置 src 属性(现在，你包括高度/来自源 img 的宽度属性，因此大小始终与第二个表中的大小相同)