代码之家 › 专栏 › 技术社区 › Mordecai

是否可以自动创建表?

unicode jquery javascript

-2

Mordecai · 技术社区 · 7 年前

我是初学者。我使用这样的HTML表代码 (见下文) 对于使用字符十进制值的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>

3 回复 | 直到 7 年前

-1

Mr. Polywhirl 7 年前

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

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

最后,您需要做的就是将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>

-2

seravee 7 年前

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

-2

Maitrik B Panchal 7 年前

下面的代码负责创建表标记

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

创建表标记后,可以按如下所示创建表行和数据元素。

$("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。