Блог

Создание динамической таблицы, в которой pageList каждый ответ имеет переменную длину. Попытка применить класс Bootstrap table-striped, однако этот стиль, похоже, не работает. Есть мысли? Я просмотрел другие примеры, но они, похоже, не соответствуют тому, что здесь происходит :

 <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>");
   
     }
  

Итак, похоже, что в вашем примере кода есть несколько проблем.

• Основная проблема заключается в том, что ваш цикл for не добавляет никаких строк в таблицу. Каждая итерация в цикле должна добавлять <tr> дочерний элемент <td> и данные в ячейку таблицы.
• background-color: white; Не требуется
• Ваш цикл for выполняет итерацию по списку страниц. Однако, похоже, что на самом деле следующий элемент в списке страниц не присваивается переменной. Предположительно, каждый элемент представляет собой объект, содержащий объект с полями для 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>  

В вашем примере вы только добавляете новые значения к существующей строке в таблице. Вместо этого вы должны вставить новую строку для каждого элемента.

Что-то вроде:

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