在第3个元素之后添加新的表数据

时间:2014-07-02 09:37:54

标签: javascript jquery html-table

我在构建内容时遇到了一些问题,我希望我的应用程序变得模块化,因此模块都是独立的,我可以简单地激活和停用它们。我有这张桌子

<tbody>

    <tr data-id="">
        <td><input name="id[]" value="" type="checkbox" class="form-control"></td>
        <td>

            <a title="Edit" href="/post/update/">
            <i class="icon-edit"></i></a> &nbsp; 
            <a title="Remove" href="/post/remove/" class="text-danger remove"><i class="icon-remove" value=""></i></a>

        </td>
        <td>53b1098726ea03181ef607a4</td>
        <td>Test post</td>
        <td>draft</td>
        <td valign="middle">June 30, 2014 02:59 PM</td>
    </tr>   

    <tr data-id="">
        <td><input name="id[]" value="" type="checkbox" class="form-control"></td>
        <td>

            <a title="Edit" href="/post/update/">
            <i class="icon-edit"></i></a> &nbsp; 
            <a title="Remove" href="/post/remove/" class="text-danger remove"><i class="icon-remove" value=""></i></a>

        </td>
        <td>53b255006f9f65c426433158</td>
        <td>test</td>
        <td>draft</td>
        <td valign="middle">July 01, 2014 02:16 PM</td>
    </tr>   

    <tr data-id="">
        <td><input name="id[]" value="" type="checkbox" class="form-control"></td>
        <td>

            <a title="Edit" href="/post/update/">
            <i class="icon-edit"></i></a> &nbsp; 
            <a title="Remove" href="/post/remove/" class="text-danger remove"><i class="icon-remove" value=""></i></a>

        </td>
        <td>53b3a3fbac4e617822fa82ed</td>
        <td>this is an example post with category</td>
        <td>draft</td>
        <td valign="middle">July 02, 2014 02:31 PM</td>
    </tr>   

</tbody>

然后我有了这个jQuery:

var post_table_body = $('body .post-list .table tbody tr');

// append the table-content
$.each(post_table_body, function(key, item) {
    console.log(item.children);
    item.children().after('<td>Sample Category</td>');
    //item.children().eq(3).after('<td>Sample</tb>');
});

所以基本上我想做的是在第3 <td>之后添加额外的<td> 但我有这个错误:

  

未捕获的TypeError:对象不是函数

每当我尝试在浏览器上运行它时,有人可以帮助我吗?

2 个答案:

答案 0 :(得分:1)

试试这个

$('body .post-list .table tbody tr').each(function(){
$(this).find('td:eq(3)').after('Your String').
});

答案 1 :(得分:1)

应该是

// append the table-content
$.each(post_table_body, function() {
   $('<td>Sample Category</td>').insertAfter($(this).find('td:nth-child(3)'));
});