add a to a table via javascript(jquery)

Question

I have this PHP in my application,

<table><tr>
                <?php

                if($music_interests !== FALSE)
                {
                    $count = 0;
                    foreach($music_interests as $interest)
                    {
                    ?>
                    <td>
                    <div class="interest inline">
                        <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img"/>
                        <p><?php echo truncate($interest['name'], 25); ?></p>

                        <div class="interest_popup">
                            <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img left"/>
                            <div class="right">
                                <strong><?php echo truncate($interest['name'], 25); ?></strong>
                                <p>Music<br><?php echo @$interest['num_users']; ?> users have this interest.</p>
                                <?php echo anchor('my_profile/remove_interest/'.$interest['id'], 'Remove interest', array('class' => 'button red upper rounded_5 small remove')); ?>
                            </div>
                            <div class="clear"></div>
                        </div><!--.interest_popup-->
                    </div>
                    </td>
                    <?php
                    $count = ($count + 1)%4;
                    if ($count == 0)
                    {
                        echo "</tr><tr>";
                    }
                    }
                }
                ?>

As you can see the PHP creates a table and every 4th <td> creates a new row. I am now adding ajax functionality to my app, but I cannot work out how I would work out if I need to create a new row first before appending a <td> that my ajax request has created.

Currently I have this code that adds a td to my table,

var interest = "<td>" + msg.name + "</td>";
self.parent().children('table').append(interest);

Your statement: "but I cannot work out how I would work out if I need to create a new row first before appending a that my ajax request has created." is not very clear. Is the response from your ajax request reliably consistent? — Lzh, Mar 17 '12 at 00:50

score 2 · Answer 1 · answered Mar 17 '12 at 00:21

You shouldn't append table cells directly into the table. Table cells goes into table rows.

Get the last row in the table, and check how many cells there are in it. If there are four cells already you need to create a new table row and append to the table, then add the cell to that row. Otherwise you can add the cell to the existing row.

score 0 · Answer 2 · answered Mar 17 '12 at 00:23

0

Warnign! untested code! I would do something like this:

var interest = "<td>" + msg.name + "</td>";
var $lastTr = self.parent().children('table tr:last');
if ($lastTr.find("td").size() < 4) {
  $lastTr.append(interest);
} else {
  interest = "<tr>" + interest + "</tr>";
  self.parent().children('table').append(interest);
}

answered Mar 17 '12 at 00:23

Chango

6,754
1
28
37

I just modified sico87's code, I guess `self` is a jQuery object. – Chango Mar 17 '12 at 00:27

Lzh · Answer 3 · 2012-03-17T13:39:52.880

Update: I modified the answer since now I have better understanding of the question.

Here's a sample that shows how you can dynamically create td and tr elements. Replace the constant content ("some value") with whatever you get using AJAX.

JSFiddle (jQuery 1.7.1 added): http://jsfiddle.net/BUR7p/3/

<html>
    <head>
        <script language="javascript" type="text/javascript">
            //my previous understanding of the question
            //function AddNewRow()
            //{
            //    var row = $(document.createElement("tr"));
            //    row.append("<td>some value</td>");
            //    row.append("<td>another val</td>");
            //    $("#mytable").children().append(row);             
            //}

            //my corrected understanding: you don't know how
            //to decide how to create a new row to put in the
            //table. note i added a table body explicitly, it
            //is added by default automatically if you don't.
            function AddNewData()
            {
                var row = $("#tablebody").children().last();
                if(row.children().length >= 4)
                {
                    console.log("creating a new row...");
                    //create a new row if we need one
                    row = $(document.createElement("tr")); 
                    $("#tablebody").append(row);          
                }
                else console.log("using existing row...");

                //add new datum to row
                row.append("<td>some value</td>");
            }
        </script>
    </head>
    <body>
        <p>
            <table id="mytable">
                <tbody id="tablebody">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>three</td>
                    <td>four</td>
                </tr>
            </tbody>
            </table>
        </p>
        <a href="#" onclick="AddNewData()">Add new row</a>
    </body>
</html>

As an alternative, you can modified the server side in a way that returns, in addition to the data, a flag whether the data should be created in a new row or not.

Please follow up and tell us if this helps or not.

score -1 · Answer 4 · edited May 23 '17 at 12:04

-1

answer found at this question:

// pass stuff to insert to .after() as an HTML string
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

documentation for :last psuedoselector and .after() function

edited May 23 '17 at 12:04

Community

1
1

answered Mar 17 '12 at 00:27

jbabey

45,965
12
71
94

Good idea to append rows to a table, but the question is not just that. – Chango Mar 17 '12 at 01:05

add a to a table via javascript(jquery)

4 Answers4