Question

Im beginner. I use a HTML table code like this (see below) for Unicode print using char's Decimal values:

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

Is it possible to convert this code into an auto-generated table as follows using JavaScript or 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

您可以先创建一个记录生成功能。

minimize

然后您可以生成JSON。

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: '&amp;&num;' + i + '&semi;',
    rendered: '&#' + i + ';'
  }
}, 1000);

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

Answer 2

You can try with this

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。希望这段代码对您有帮助

Is it possible to create a table automatically?

3 个答案:

示例