使用JQuery动态地在html表上添加图像

Adding Image on html table dynamically using JQuery

本文关键字：添加图像 html JQuery 动态使用更新时间：2023-09-26

我试图使用JQuery动态地在html表上添加图像，但我很困惑如何找到表2,3..Etc tr with in first td .

我的表结构没有id或类如何查找，但在表之前有一些文本如下。

 <table width="100%" border="0" cellspacing="1" cellpadding="5">
        <tbody>
        <tr valign="top">
            <td colspan="2"><b>Order Details:</b><br> <br>
                <table width="100%" bgcolor="#EEEEEE">
                    <tbody>
                    <tr>
                        <td>
                            <b>Code</b>
                        </td>
                        <td>
                            <b>SKU</b>
                        </td>
                        <td>
                            <b>Quantity</b>
                        </td>
                        <td>
                            <b>Price</b>
                        </td>
                        <td>
                            <b>Grand Total</b>
                        </td>
                    </tr>
                    <tr>
                        <td>10172</td>
                        <td>Product 1<br></td>
                        <td>5</td>
                        <td>
                            ₹ 50.00
                        </td>
                        <td>
                            ₹ 250.00
                        </td>
                    </tr>
                    <tr>
                        <td>10165</td>
                        <td>Product 2<br></td>
                        <td>5</td>
                        <td>
                            ₹ 50.00
                        </td>
                        <td>₹ 250.00
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3">&nbsp;</td>
                        <td align="right"> Subtotal: </td>
                        <td>₹ 250.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">&nbsp;</td>
                        <td align="right"> Tax: </td>
                        <td>₹ 0.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">&nbsp;</td>
                        <td align="right"> Shipping Cost: </td>
                        <td>₹ 0.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">&nbsp;</td>
                        <td align="right"> Grand Total: </td>
                        <td>₹ 250.00</td>
                    </tr>
                    </tbody>
                </table>
                <br>
            </td>
        </tr>
        </tbody></table>

如何在SKU前添加产品图像。

请帮忙…?

由于您没有thead或甚至使用th作为标题，您将不得不跳过第一行，您可以使用">"来指定直接层次结构，例如:

$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
    var codecell = $(this).find("td:eq(0)");
    var img = "/pathtoimage/" + codecell.text() + ".jpg"
    codecell.after("<td><img src='" + img + '/></td>");
});

更新:修正了("td:eq(0)") vs ("td").eq(0) vs ("td")[0]的拼写错误