将带表的Bootstrap应用到动态表不起作用

问题描述

创建一个动态表，其中Pagelist的每个响应的长度都是可变的。尝试应用Bootstrap的表条纹类，但是这种样式似乎不起作用。有什么想法吗？我看过其他示例，但它们似乎与此处的情况不符：

<div class="container-fluid">
    <div class="table-responsive">
        <table class="table table-outline table-striped table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody style="background-color: white; ">
                <tr>
                    <td class="name"></td>
                    <td class="address"></td>
                    <td class="email"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

/////

for (r = 0; r < Pagelist.length; r++) {
  
    $('.name').append("<br>" + fullName + "<br>");
    $('.address').append("<br>" + homeAddress + "<br>");
    $('.email').append("<br>" + "$" + personalEmail + "<br>");
   
     }

解决方法

在您的示例中，您仅将新值附加到表中的现有行。相反，您应该为每个项目插入新行。

类似的东西：

var pageList = [
  {
    fullName: 'TestName1',homeAddress: 'TestAddress1',personalEmail: 'TestEmail1'
  },{
    fullName: 'TestName2',homeAddress: 'TestAddress2',personalEmail: 'TestEmail2'
  }
];
var table = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

for(const item of pageList) {
    var row = table.insertRow(0);
    var nameCell = row.insertCell(0);  
    var addressCell = row.insertCell(1);
    var emailCell = row.insertCell(2);
  
    nameCell.className = 'name';
    addressCell.className = 'address';
    emailCell.className = 'email';

    nameCell.innerText = item.fullName;
    addressCell.innerText = item.homeAddress;
    emailCell.innerText = item.personalEmail;    
}

因此，示例代码似乎存在一些问题。

主要问题是您的for循环不会在表中添加任何行。循环中的每次迭代都应添加一个<tr>，一个子级<td>和表单元格中的数据。
background-color: white;是不必要的
您的for循环正在pageList上进行迭代。但是，它似乎并未实际将pageList中的下一个元素分配给变量。大概每个元素都是一个对象，其中包含一个具有fullName，homeAddress和personalEmail字段的对象。

基于此假设，您可以使用类似于以下示例的代码来创建动态表。

var pageList = [{
    fullName: "John Doe",homeAddress: "13 Home St",personalEmail: "you@mail.com"
  },{
    fullName: "Jane Doe",homeAddress: "55 Work St",personalEmail: "me@mail.com"
  }
];


for (r = 0; r < pageList.length; r++) {
  var e = pageList[r];
  var tbody = $("#theTable tbody");
  tbody.append("<tr><td>" + e.fullName + "</td><td>" + e.homeAddress + "</td><td>" + e.personalEmail + "</td></tr>");
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="table-responsive">
    <table id="theTable" class="table table-outline table-striped table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Address</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>

html twitter-bootstrap