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

Question

我正在尝试使用JQuery动态地在html表上添加图像，但我很困惑如何在第一个td中找到一个表2,3..etc tr来添加图像。

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

 <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之前添加产品图像。

任何帮助PLZ ..？

Answer 1

由于您没有thead甚至使用th标题，您必须跳过第一行，您可以使用＆＃34;＆gt; ＆＃34;指定直接层次结构，例如：

$("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)")与("td").eq(0)与("td")[0]

的拼写错误