Динамическое добавление изображения в таблицу html с помощью jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь динамически добавлять изображение в таблицу html с помощью jQuery, но я не понимаю, как найти таблицу 2,3 ..etc tr с помощью первого td для добавления изображения.

В моей структуре таблицы нет идентификатора или класса, как найти, но перед таблицей есть текст, как показано ниже.

  <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">amp;nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3">amp;nbsp;</td>
                        <td align="right"> Subtotal: </td>
                        <td>₹ 250.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">amp;nbsp;</td>
                        <td align="right"> Tax: </td>
                        <td>₹ 0.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">amp;nbsp;</td>
                        <td align="right"> Shipping Cost: </td>
                        <td>₹ 0.00</td>
                    </tr>
                    <tr>
                        <td colspan="3">amp;nbsp;</td>
                        <td align="right"> Grand Total: </td>
                        <td>₹ 250.00</td>
                    </tr>
                    </tbody>
                </table>
                <br>
            </td>
        </tr>
        </tbody></table>

Как добавить изображение продукта перед артикулом.

Любая помощь, пожалуйста ..?

1. Где артикул в таблице?

2. @Satpal Item как SKU любой другой способ, который я обновил.

3. Лучше всего изменить html…

4. @freedomn-m, да, но у нас нет приведенного выше кода, нам нужно ввести изображение продукта через jquery.

Ответ №1:

Поскольку у вас нет 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]