append a row dyanamically inside a table using javascript

Question

I need to append some number of rows(say 10) in a table using javascript. The row will be fetched from a separate static html page(i guess using the id can fetch them ). The html will be static, so it is been used like a template. How can it be done. since im a beginner am unable to think beyond the below code.

           var myTableDiv = document.getElementById("DivTable");
           var tableBody = document.getElementById("tBody");
           var table = document.getElementById('Table');
           for (var i = 0; i < 3; i++) {
            var tr = document.getElementById('tableRow');               
            var TD1= document.getElementById('FirstColumn');
            var TD2= document.getElementById('ScondColumn');
            var TD3= document.getElementById('ThirdColumn');
            var TD4= document.getElementById('FourthColumn');
            var TD5= document.getElementById('FifthColumn');
            tr.appendChild(TD1);
            tr.appendChild(TD2);
            tr.appendChild(TD3);
            tr.appendChild(TD4);
            tr.appendChild(TD5);

        tableBody.appendChild(tr);

    myTableDiv.appendChild(table);
}

I guess this ll result in overlapping of rows. Not sure. Kindly correct it.

HTML here...

     <div class="MgmtView" id="DivTable">
        <table class="projectMgmtTable" width="100%" id="Table">
            <thead>
                <tr>
                    <th><h4>Review</h4></th>
                    <th>Sort
                        <select>
                            <option>Sample 1</option>
                            <option>Sample 2</option>
                        </select> 
                        <div>
                            <div class="sortUpArrow"></div>
                            <div class="sortDownArrow"></div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody id="tBody">
                <tr class="rowTable" id="tableRow">
                    <td id="FirstColumn">
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">ID</div>
                                <div class="labelRight">1</div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelHead">Address</div>
                                <div class="labelLeft">
                                    <textarea placeholder="Risk Description Here" rows="11"></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td id="ScondColumn">
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Location</div>
                                <div class="labelRight">
                                    <select disabled="disabled">
                                        <option>1</option>
                                        <option>2</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Country</div>
                                <div class="labelRight">
                                    <select>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                    </select>
                                </div>
                            </div>
                        </div>  
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Division</div>
                                <div class="labelRight">
                                    <select class="showRpn">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-row rpnSection dispNone">
                            <div class="table-cell">
                                <div class="labelLeft">Amount</div>
                                <div class="labelRight">
                                    <input value="123" class="greenBg" type="text" />
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">date of birth</div>
                                <div class="labelRight">
                                    <input type="text" disabled="disabled" class="calendar" />
                                </div>
                            </div>
                        </div>                      
                    </td>
                    <td id="ThirdColumn">
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelHead">Relationship</div>
                                <div class="labelLeft">
                                    <textarea disabled="disabled" placeholder="Risk Description Here" rows="8"></textarea>
                                </div>
                            </div>
                        </div>
                         <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Date</div>
                                <div class="labelRight">
                                    <input disabled="disabled" type="text" class="calendar" />
                                </div>
                            </div>
                        </div>  
                         <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">MStatus</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Open</option>
                                        <option>Active</option>
                                        <option>Closed</option>
                                        <option>Resolved</option>
                                    </select>
                                </div>
                            </div>
                        </div>    
                    </td>
                    <td id="FourthColumn">
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelHead">Plan</div>
                                <div class="labelLeft">
                                    <textarea placeholder="Risk Description Here" rows="8"></textarea>
                                </div>
                            </div>
                        </div>
                         <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Target Date</div>
                                <div class="labelRight">
                                    <input type="text" class="calendar" />
                                </div>
                            </div>
                        </div>  
                         <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Status</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Open</option>
                                        <option>Active</option>
                                        <option>Closed</option>
                                        <option>Resolved</option>
                                    </select>
                                </div>
                            </div>
                        </div>    
                    </td>
                    <td id="FifthColumn">
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Status</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Open</option>
                                        <option>Active</option>
                                        <option>Closed</option>
                                        <option>Resolved</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Category</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Sample 1</option>
                                        <option>Sample 2</option>
                                        <option>Sample 3</option>
                                        <option>Sample 4</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Status</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Sample 1</option>
                                        <option>Sample 2</option>
                                        <option>Sample 3</option>
                                        <option>Sample 4</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell">
                                <div class="labelLeft">Action</div>
                                <div class="labelRight">
                                    <select>
                                        <option>Sample 1</option>
                                        <option>Sample 2</option>
                                        <option>Sample 3</option>
                                        <option>Sample 4</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="noBorder">
                    <td colspan="5">&nbsp;</td>
                </tr>
               </tbody>
        </table>

unable to reproduce 3 rows as per the loop for (var i = 0; i < 3; i++) — bloo
– bloo, Commented May 26, 2015 at 12:55
where does <table class="projectMgmtTable" width="100%" id="Table"> and <div class="MgmtView" id="DivTable"> ends?? — ozil
– ozil, Commented May 26, 2015 at 12:58

Lakhan · Accepted Answer · 2015-05-27 05:57:02Z

2

Try this Code : With the help of append() function you will add it Like that way : check the fiddle link also for demo

$(document).ready(function(){
    $("table tbody").append("<tr><td>asdf</td><td>asasdsdf</td></tr>");
});

JSFIDDLE

answered May 27, 2015 at 5:57

Lakhan

13.5k3 gold badges21 silver badges29 bronze badges

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

Comments

user3136884 · Accepted Answer · 2015-05-27 05:43:54Z

0

The javascript appendChild() function append the content to the selected elements. Here, if you want to add the rows to existing table then you have to create the string of the table row with require content. Then you can append it. So, Consider this is your HTML table.

<table>
   <thead>
     <tr>
       <th>Name</th>
       <th>Address</th>
     </tr>
   </thead>

  <tbody id="tBody">
    <tr><td>Sam</td>India</tr>
  </tbody>

</table>

If you want to add new row, create row element (string) in javascript

var str="<tr><td>Bob</td><td>India Maharashtra</td></tr>";
var tableBody = document.getElementById("tBody");
tableBody.appendChild(str);

If you want to add blank row then only pass blank td like,

var str="<tr><td></td><td></td></tr>";

Try this.

answered May 27, 2015 at 5:43

user3136884

1612 silver badges9 bronze badges

3 Comments

bloo Over a year ago

I guess it ll be static html, like the table grows only if i hard code the row element. How to deal with the table that grows dynamically based on the input from the backend???

user3136884 Over a year ago

Input from backend ? Are you using ajax call to get the values ? if it is static then i think above code will work with content or with empty rows. If it is dynamic where you are getting values from ajax call or from some file on some button click (not on page load) you have to prepare string of row and append to table as mentioned.

bloo Over a year ago

Yes. But now am trying by setting the length of the row using for loop. Will the above stuff works?

Sibin V A · Accepted Answer · 2015-05-27 09:08:36Z

0

check this demo --- fiddle

var myTable = document.getElementById("tableID");
var appenDiv = document.getElementById("wrap");
var newTable = document.createElement("table");
appenDiv.appendChild(newTable);
for(var i=0;i<2;i++){
    var tr = myTable.rows[i];
    var cln = tr.cloneNode(true);
    newTable.appendChild(cln);
}

I believe that it will help you to understand how to append an html table rows.

answered May 27, 2015 at 9:08

Sibin V A

574 bronze badges

Collectives™ on Stack Overflow

append a row dyanamically inside a table using javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related