Build HTML Table with JavaScript, row order

Question

I am building a html table dynamically with Javascript; This is my html table:

<table class="ui-list" cellpadding="2" id = "tbl">
                <thead>
                    <tr>
                        <th>Artikel ID</th>
                        <th>Artikelnr</th>
                        <th>Bezeichnung</th>
                        <th>Stk.</th>
                        <th><?php echo FW_HTML_Button::build('entfernen', array('onclick' => '' ,'id'=>'get_button')); ?></th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td></td>
                    <td></td>
                    <td>Gesamt:</td>
                    <td></td>
                    <td>Action:</td>
                    </tr>
                <!-- Fill with JS -->
                </tbody>
            </table>

And this is how I fill it with rows:

         function addRow(tableID) {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);

                var cell1 = row.insertCell(0);
                var element1 = obj[16][count]["id"]["article_id"];
                cell1.innerHTML = element1;

                var cell2 = row.insertCell(1);
                var element2 = obj[16][count]["id"]["article_no_internal"];
                cell2.innerHTML = element2;

                var cell3 = row.insertCell(2);
                var element3 = obj[16][count]["id"]["article_name_internal"];
                cell3.innerHTML = element3;

                var cell4 = row.insertCell(3);
                cell4.innerHTML = obj[16][count]["stk"];;

                var cell5 = row.insertCell(4);
                var element4 = document.createElement("input");
                element4.type = "checkbox";
                cell5.appendChild(element4);

            }

It works just fine, my only problem is as you can see I already have a row in my html part, and I would like to put the new row, before the row I created in html. For now it always puts the new rows after the row where is written 'gesamt' and 'action'. Is it possible to make this different?

András Szepesházi · Accepted Answer · 2012-08-30 09:21:38Z

2

Use

var row = table.insertRow(rowCount - 1);

instead of

var row = table.insertRow(rowCount);

(Assuming, of course, that it is guarranteed that you'll always have that footer row in your table).

See: http://jsfiddle.net/hwSfG/

answered Aug 30, 2012 at 9:21

András Szepesházi

6,7835 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

malifa · Accepted Answer · 2012-08-30 09:18:06Z

1

You could use JQuery .prepend() function. It inserts elements at the beginning of a parent element: http://api.jquery.com/prepend/

answered Aug 30, 2012 at 9:18

malifa

8,1552 gold badges44 silver badges57 bronze badges

Collectives™ on Stack Overflow

Build HTML Table with JavaScript, row order

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related