Question

我有以下HTML表格：

<div class="someClass" id="someID">

<!-- Move all images inside the td's  here -->

<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
    <tbody>
        <tr>
            <td align="center">
                <img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
            </td>
            <td align="center">
                <img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
            </td>
        </tr>
        <tr>
            <td align="center">
                <img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
            </td>
            <td align="center">
                <img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
            </td>
        </tr>
        ....
    </tbody>
</table>

我想要的是通过每个td删除图像并将其插入表格之前。而不是删除整个表。这样做的最佳方式是什么？

感谢。

Answer 1

您可以使用jQuery并使用each()遍历所有td元素，并将td内的所有图片移到表格之前。

$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});

SEE DEMO

Answer 2

我有这个工作：

<强> WORKING FIDDLE

$(document).ready(function(){
    $('.bvz_beeldthumb').each(function(){
        $('.someClass').append(this);
    });
    $('#mainTable').remove();
});

文档就绪意味着当文档准备好时，代码将被触发。它在页面上找到所有带有类bvz_beeldthumb的图像，并将其移动到div someClass。之后它删除了表格。

Answer 3

试一下

$("#mainTable td").each(function() {
    var Img=$(this).find("img");
    $("#someID").prepend(Img);//here element 'id' in which you want to put these images.
    $(this).find("img").html('');
});

我希望这可以帮助你!!

Answer 4

您可以尝试类似

的内容

＆＃13;

$('#mainTable img').insertBefore('#mainTable')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
  <tbody>
    <tr>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
      </td>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
      </td>
    </tr>
    <tr>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
      </td>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
      </td>
    </tr>
    <tr>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
      </td>
      <td align="center">
        <img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

从表中删除所有图像并在之前插入

4 个答案: