CODEWITHSUNDEEP
javascriptjqueryhtml-table
Alleo Indong
Alleo Indong

Reputation: 327

Adding new Table Data <td> after the 3rd element of <tr>

I've encountered some problems while building something, I want my application to become modular so the modules are all independent and I can simply activate and deactivate them. I have this 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>

and then I have this 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>');
});

so basically what I wanted to do is add an additional <td> after the 3rd <td> but I'm having this error:

Uncaught TypeError: object is not a function

whenever I try to run it on my browser, can someone help me out please?

Upvotes: 1

Views: 557

Answers (2)

Think Different
Think Different

Reputation: 2815

It should be

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

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Try this

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

Upvotes: 1

Related Questions