文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery动态创建的表行与引导表头不对齐

问Jquery动态创建的表行与引导表头不对齐
EN

Stack Overflow用户

提问于 2017-07-10 20:31:51

回答 1查看 1.4K关注 0票数 0

我使用了下面的堆栈溢出问题Javascript / jQuery: How to dynamically add rows to table body (using arrays)的答案，以实现表格行的动态添加。我也使用bootstrap主题。加法操作已正确完成，但<td>未与<th>对齐。

我的html代码如下：

<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>

而jQuery代码如下：

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

由于我是bootstrap框架和jQuery的新手，我应该怎么做才能使这些值与相关的头对齐？

jquery

twitter-bootstrap-3

html-table

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-10 20:40:57

你在找这个吗：

/*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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45012150

复制

相似问题

问Jquery动态创建的表行与引导表头不对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery动态创建的表行与引导表头不对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery动态创建的表行与引导表头不对齐
EN