Создать таблицу указанного столбца и строк в Jquery - PullRequest
Новая
       1

Создать таблицу указанного столбца и строк в Jquery

0 голосов
/ 06 февраля 2020

Я новичок в jQuery, я хочу создать таблицу с указанным c числом строк и столбцов в jQuery.

Вот что я пробовал, это создает таблицу с указанными c количество строк, но не создает таблицу с указанием c количество столбцов 

function constructTable () {
  let table = $('<table>').first().prepend('<caption><b> Borrow </b></caption>');
  let row;
  let cell1;
  let cell2;
  table.attr({"id":"burrow"});

  for(i=0; i < 3; i++) {
    row = $('<tr>');
    table.append(row);
   
  }
  
   for ( i = 0 ; i < 4; i++ ) {
    cell1 = $('<td>').text('cell ' + i);
    row.append(cell1);
  }

  
    $("#borrowLicensediv").append(table);
    document.getElementById('borrowLicensediv').style.display = '';	
}
<!doctype html>
<html>
<head>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
  
</head>
<body onload="constructTable ()" style="background: white;">
    <div id="borrowLicensediv" style="display: none; margin-top:10px; margin-bottom:25px; margin-left:20px; margin-right:37px;"></div>
    
</body>
</html>

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Прежде чем добавлять строки в таблицу, они должны сначала иметь ячейки, иначе в вашей таблице будут пустые строки без столбцов. Оставив на мгновение jQuery, общая проблема такова:

  1. Построить строку
  2. Добавить ее в таблицу
  3. Повторить 1 и 2 для всех строк добавить

Шаг (1) подразумевает, что вы сначала создаете нужные ячейки в строке и добавляете их в строку. Это означает, что у вас будут вложенные циклы (тогда как в вашем примере они встроены).

Вам нужно что-то более похожее на 

for(i=0; i < 3; i++) {
    var row = "<tr>";
    for ( j = 0 ; j < 4; j++ ) {
        var value = "cell " + i + "," + j;
        var td = "<td>" + value + "</td>";
        row += td;
    }
    row += "</tr>";
    table.append(row);
}
1 голос
/ 06 февраля 2020

Вы добавляете TD в последнюю строку, потому что ваша ячейка l oop находится вне строки l oop. Нам нужно переместить l oop внутрь и исправить переменную итератора, например: 

for(var r=0; r < 3; r++) {
   row = $('<tr>');

   for ( var c = 0 ; c < 4; c++ ) {
      cell = $('<td>').text('cell ' + r+c);
      row.append(cell);
   }
   table.append(row);   
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...