Jquery dynamically created table rows unaligned with bootstrap table headers

Question

I have used the answer of the following stackoverflow question Javascript / jQuery: How to dynamically add rows to table body (using arrays) , in order to achieve dynamic adding of table row. I also use a bootstrap theme. The adding is done correctly but the <td> are unaligned with the <th>.

My html code is the following:

<div class="row" id="dynamic_table">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
      </div>
      <div class="panel-body center">
        <table class="table">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
          <tbody id="table_body">
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

While the jQuery code is the following:

tbody = "<tr><td>" + value1 +"</td><td>" + value2 +"</td><td>" + value3 + "</td><td>" + value4 +"</td></tr>";
$('#table_body').html(tbody);

Since I'm quite new in bootstrap framework and jQuery what should I do in order for the values to be aligned with the relevant headers?

Slightly unrelated, but you probably want to use .append in place of .html so your tbody is not overwritten when adding multiple rows. — J. Titus
– J. Titus, Commented Jul 10, 2017 at 12:35
We need to see your styles. If e.g. you use display: <something other than table or table-cell> then the whole table can become unaligned. — Peter B
– Peter B, Commented Jul 10, 2017 at 12:37
Peter B I just use the default bootstrap.css table styles unless you meant something else — dk13
– dk13, Commented Jul 10, 2017 at 12:41
What are some examples of the values value1, value2, etc? — J. Titus
– J. Titus, Commented Jul 10, 2017 at 12:45
@dk13 can you check my answer. and let me know.. i have used bootstrap css and added dynamic values — SwapNeil
– SwapNeil, Commented Jul 10, 2017 at 12:54

SwapNeil · Accepted Answer · 2017-07-10 13:33:32Z

2

Are you looking for this:

/*for testing dynamic values */
var testData = [1,2,3,4,5];

$.each(testData,function(index, value){
var tBody = '<tr><td>row-'+value+'</td><td>row-'+value+'</td><td>row-'+value+'</td><td>row-'+value+'</td></tr>';
$('#table_body').append(tBody);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style> td,th{border:1px solid #ddd;vertical-align:top;} tr{margin:0;}</style>
<div class="row" id="dynamic_table">
                  <div class="col-lg-12">
                      <div class="panel panel-default">
                          <div class="panel-heading"> Dynamic Table
                          </div>
                          <div class="panel-body center">
                             <table class="table">
                             <thead>
                               <tr>
                                 <th>Header 1</th>
                                 <th>Header 2</th>
                                 <th>Header 3</th>
                                 <th>Header 4</th>
                               </tr>
                             </thead>
                             <tbody id="table_body">
                             </tbody>
                           </table>
                          </div>
                    </div>
                </div>
        </div>

edited Jul 10, 2017 at 13:33

answered Jul 10, 2017 at 12:40

SwapNeil

5552 silver badges14 bronze badges

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

6 Comments

J. Titus Over a year ago

If you use .html you get the same result, and from the looks of it you didn't change any of OP's original markup, so this is not a helpful answer.

Rence Over a year ago

Considering that he wanted to add it one by one or inside a for loop, the .html() it will overwrite the elements inside the <tbody> ending up to just one new <tr> with <td>s, but if you would use .append() it will add up. So I suggest also to use append if that is the case.

SwapNeil Over a year ago

@lourz_yan i already used append not html to add new how dynamically

Rence Over a year ago

Oh sorry I'm talking to @J.Titus.

J. Titus Over a year ago

@lourz_yan If you look at the OP's question, they are already using .html. You can also see that I commented on OP's question stating that .append was a better option. I was merely stating that this answer provides no further assistance to OP's problem of the data not lining up with the headers.

|

Collectives™ on Stack Overflow

Jquery dynamically created table rows unaligned with bootstrap table headers

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related