Question

我的标记是这样的。在这里，您可以看到我有产品ID，产品名称，最后一列是空白列。所以在最后一栏（空白）中我想添加这样的标记 jquery中的<a class="remove-product" data-id="5" href=""><i class="icon-remove"></i></a> 这是标记，你可以看到我有data-id。我希望这个data-id将从每行的项目id值中分配。与第1行一样，data-id应为5，因为第1行产品id为5，第2行应为7，因为第2行的产品ID为7，依此类推。那么有人可以告诉我如何添加它吗？

<table class="table products">
    <thead>
        <tr class="nodrag nodrop">
            <th class="">
                <span class="title_box">Product ID</span>
            </th>
            <th class="">
                <span class="title_box">Product Name</span>
            </th>
            <th class="">
                <span class="title_box">Action</span>
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="pointer">5</td>
            <td class="pointer">Summer Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="even">
            <td class="pointer">7</td>
            <td class="pointer">Printed Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="odd">
            <td class="pointer">8</td>
            <td class="pointer">Printed Summer Dress</td>
            <td class="pointer"></td>
        </tr>
        <tr class="even">
            <td class="pointer">9</td>
            <td class="pointer">TShirt</td>
            <td class="pointer"></td>
        </tr>
</tbody>
    </table>

抱歉，我可以更改标记。它来自其他来源。

Answer 1

尝试以下代码：

$(document).ready(function(){
$("table.products tbody tr").each(function(){
    var ID = $(this).find("td:first-child").html();
    var link = '<a class="remove-product" data-id="'+ID+'" href="#"><i class="icon-remove"></i></a>';
     $(this).find("td:nth-child(3)").html(link);
});});

小提琴网址：http://jsfiddle.net/SachinDhir/df54dkjx/1/

Answer 2

this

怎么样？

$('.products tbody tr').each(function(index,elem){
    var $elem = $(elem);
    $elem.find('td').last().append('<a class="remove-product" data-id="'+$elem.find('td').first().html()+'" href=""><i class="icon-remove"></i>Remove</a>');
})

Answer 3

这会奏效。查看 FIDDLE

$('.products tbody tr').each(function() {
    var val = $(this).find('td:first-child').html();
    $(this).find('td:last-child').append('<a class="remove-product" data-id="'+val+'" href=""><i class="icon-remove"></i>Delete</a>')    
});

这里我们根据需要从第一个td元素的值中获取最后一个td元素的data-id，并将值附加到最后一个

Answer 4

以下代码将在最后一栏添加已定义的html。

$(document).ready(function () {   
$('.products tbody tr').append('<a class="remove-product" data-id="5" href=""><i class="icon-remove"></i>Delete</a>');});

这是jsfiddle链接http://jsfiddle.net/rasingh3984/Lzyhk24x/

jQuery使用行中的产品ID动态添加标记

4 个答案: