是否可以自动创建表？

Question

我是初学者。我使用这样的 HTML 表格代码 （见下文） 使用 char 的十进制值进行 Unicode 打印：

<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

您可以从创建记录生成函数开始。

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 2

你可以试试这个

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

Answer 3

是的，可以使用 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。 希望这段代码可以帮到你