Можно ли создать таблицу автоматически?

Question

Я начинающий.Я использую HTML-код таблицы, как этот (см. Ниже) для печати в Юникоде с использованием десятичных значений char:

<table border="1">
  <tr><td>1</td><td>&#1;</td>
  <tr><td>2</td><td>&#2;</td>
  <tr><td>3</td><td>&#3;</td>
  ...
  <!-- last one: thousandth row -->
  <tr><td>1000</td><td>&#1000;</td>
</table>

Возможно ли преобразовать этот код в автоматически сгенерированную таблицу следующим образомиспользуя JavaScript или JQuery?

<table border="1">
  <tr><td>rowNumber</td><td>innerHTML = "\u0026\u0023 + rowNumber + \u003B";</td>
  ...
  <!-- thousandth row -->
  <tr><td>rowNumber</td><td>innerHTML = "\u0026\u0023 + rowNumber + \u003B";</td>
</table>

Answer 1

Да, это возможно при использовании javascript / JQuery. Для этого вам нужно использовать правильный код js.Ниже приведен пример кода, который может помочь вам создать данные таблицы и строки, используя jquery.Ниже код отвечает за создание тега таблицы

$('.class-name').append('<table border="3"></table>');

Это создаст элемент таблицы внутри вашего HTML с именем класса в качестве .class-name.

После создания тега таблицы вы можете создать строку таблицыи элемент данных, как показано ниже.

$("table").append(createRow());

function createRow(){
var firstVal = '1st val';
var secondVal = '2nd val';
   var tr = '<tr>' ;
    tr += '<td>' + firstVal  + '</td>';
    tr += '<td>' + secondVal + '</td>';  
    tr +='</tr>';
    return tr;
}

Этот код сгенерирует строку таблицы и напечатает данные таблицы как st val и 2nd val.Надеюсь, что этот код может помочь вам

Answer 2

Вы можете начать с создания функции генерации записи.

function generateRecords(recordFn, limit) {
  var records = [];
  for (var i = 0; i < limit; i++) {
    records.push(recordFn.call(null, i, records));
  }
  return records;
}

Затем вы можете сгенерировать JSON.

generateRecords(i => {
  return {
    dec: i,
    entity: '&#' + i + ';',
    rendered: '&#' + i + ';'
  }
}, 1000);

Наконец, все, что вам нужно сделать, это отрендерить JSON.к таблице.

Пример

(function($) {
  $.fn.attrs = function(attrs) {
    var $self = this;
    if (attrs != null) {
      $.each(attrs, function(attr, value) {
        $self.attr(attr, value);
      });
      return $self;
    } else {
      var result = {};
      $.each(this[0].attributes, function(index, attribute) {
        result[attribute.name] = attribute.value;
      });
      return result;
    }
  };
  $.fn.tableFromJson = function(data, attrs, indexField) {
    return this.replaceWith($.tableFromJson.apply(this, arguments));
  };
  $.tableFromJson = function(data, attrs, indexField) {
    var fields = Object.keys(data[0]);
    if (indexField != null) fields.unshift(indexField);
    return $('<table>')
      .append($('<thead>').append($('<tr>').append(fields
        .map(field => $('<th>').text(field)))))
      .append($('<tbody>').append(data
        .map((rec, row) => $('<tr>').append(fields
          .map((field, col) => $('<td>').html(field === indexField ? (row + 1) : rec[field])))))).attrs(attrs);
  };
})(jQuery);

function generateRecords(recordFn, limit) {
  var records = [];
  for (var i = 0; i < limit; i++) {
    records.push(recordFn.call(null, i, records));
  }
  return records;
}

$('.column:nth-child(1) .result').tableFromJson(generateRecords(i => {
  return {
    dec: i,
    entity: '&amp;&num;' + i + '&semi;',
    rendered: '&#' + i + ';'
  }
}, 1000), $('.column:nth-child(1) .result').attrs());

$('.column:nth-child(2) .result').tableFromJson(generateRecords(i => {
  return {
    dec: i,
    rendered: '\u0026\u0023' + i + '\u003B'
  }
}, 1000), $('.column:nth-child(2) .result').attrs());

.container { width: 100%; }
.column { display: inline-block; width: 49%; }

table.result {
  margin-bottom: 0.5em;
}

table.result,
table.result th,
table.result td {
  border: 1px solid black;
  border-collapse: collapse;
}

table.result th,
table.result td {
  padding: 0.25em;
}

table.result tbody tr td {
  text-align: center;
}

table.result thead tr {
  background: #BBB;
}

table.result tbody tr:nth-child(even) {
  background: #EEE;
}

table.result tbody tr:nth-child(odd) {
  background: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="column">
    <table class="result"></table>
  </div>
  <div class="column">
    <table class="result"></table>
  </div>
</div>

Answer 3

Вы можете попробовать с этим

var table = $('<table>').prop('border', 1);
for(i=0; i<1000; i++){
    var row = $('<tr><td>' +  i + '</td><td>&#'++'</td></tr>'
    table.append(row);
}

$('#mytable').append(table);