如何为HTML表格设置固定的行数?

时间:2019-02-04 14:14:21

标签: javascript html css

我希望我的HTML表显示空白行,以使每次的总行数相同,以便该表可以始终填充屏幕。我正在处理一个对象列表,我想遍历显示在一行上的每个对象,然后再遍历几次,直到达到固定的迭代次数。

我目前有一个剃须刀foreach循环,该循环遍历每个对象并将它们显示为行。我的主意是使用像这样的for循环来做

for (int i=0; i<10; i++)
  { row for object }

如何访问每个对象以在for循环中显示它?

编辑:这是更多代码

@foreach (var exampleObject in Model)
{
    if (exampleObject.Position == "examplePosition")
    {
        <tr>
            <td>@exampleObject.Name<span class="rotate">
                <text class="button">@Html.ActionLink(HttpUtility.HtmlDecode("&#9998;"), "Edit", new { id = exampleObject.ID }, new { style = "color:Black" })</text></span>
            </td>
            <td>@exampleObject.Rooms</td>
            <td>@exampleObject.Phone</td>
            <td><text class="button" style="float:right">@Html.ActionLink(HttpUtility.HtmlDecode("&#9746;"), "Delete", new { id = exampleObject.ID }, new { style = "color:Black" })</text>@exampleObject.Location</td>
        </tr>
    }
}

最终编辑:我找到了一种草率的方法,但这很简单,也是我找到的唯一方法。在上面的代码之后,我做到了:

@for (var i = 0; i < 1; i++)
    {
        var s = 0;
        foreach (var exampleObject in Model)
        {
            if (exampleObject.Position == "examplePosition")
            {
                s++;
            }
        }
        for (i = s; i < 12; i++)
        {
            <tr>
                <td colspan="4">
                    &nbsp;
                </td>
            </tr>
        }
    }

我基本上制作了一个for循环,该循环重复一次,以便可以在表内部使用一些嵌套剃刀(我知道这是不好的作法)。然后,我计算了通过foreach循环在此特定位置的表上显示的数量,并将数量设置为在草率的for循环中声明的局部变量。然后,我进行了另一个for循环,这次将i设置为我已经拥有的行数,并将其设置为迭代并显示一个空行,只要该行数低于我的首选数即可。这是一种草率的方法,但嘿,它有效。

最终决赛编辑:

我整理了一下,看来效果更好。

@{
            var counter = 0;

            foreach (var exampleObject in Model)
            {
                if (exampleObject.Position == "examplePosition" && counter < 13)
                {
                    <tr>
                        <td>@exampleObject.Name</td>
                        <td>@exampleObject.Rooms</td>
                        <td>@exampleObject.Phone</td>
                        <td>@exampleObject.Location</td>
                    </tr>
                    counter++;
                }
            }

            for (int i=counter; i<13; i++)
            {
                <tr><td colspan="4">&nbsp;</td></tr>
            }
        }

2 个答案:

答案 0 :(得分:0)

您可以实现分页。这是一种检索请求数据页的简单方法。

def _get_last_layer_units_and_activation(num_classes):
if num_classes == 2:
    activation = 'sigmoid'
    units = 1
else:
    activation = 'softmax'
    units = num_classes
return units, activation


def mlp_model(layers, units, dropout_rate, input_shape, num_classes):
op_units, op_activation = _get_last_layer_units_and_activation(num_classes)
model = models.Sequential()
model.add(Dropout(rate=dropout_rate, input_shape=input_shape))

for _ in range(layers-1):
    model.add(Dense(units=units, activation='relu'))
    model.add(Dropout(rate=dropout_rate))

model.add(Dense(units=op_units, activation=op_activation))
return model
learning_rate = 1e-4
epochs = 50
batch_size = 512
layers = 3
units = 64
dropout_rate = 0.2

带有分页的jQuery表生成

var requests = {
  'vehicles' : [
    { "id": 1, "name": "John", "age": 24, "make": "Chevorlet", "model": "Silverado", "year": 2016 },
    { "id": 2, "name": "Jack", "age": 36, "make": "Toyota",    "model": "Corolla",   "year": 2018 },
    { "id": 3, "name": "Jill", "age": 29, "make": "Ford",      "model": "Escape",    "year": 2015 }
  ]
};

console.log(requestPage('vehicles', 1, 2)); // Request page #1 of 2
console.log(requestPage('vehicles', 2, 2)); // Request page #2 of 2

function requestPage(request, page, limit) {
  if (requests == null || requests[request] == null) throw Error('Data does not exist for ' + request)
  let data = requests[request], records = [];
  for (let offset = 0; offset < limit; offset++) {
    let index = ((page - 1) * limit) + offset;
    if (index < data.length) records.push(requests[request][index]);
  }
  return {
    metadata : {
      page  : page,
      pages : Math.ceil(data.length / limit),
      limit : limit,
      count : records.length,
      total : data.length
    },
    payload : records
  };
}

示例

.as-console-wrapper { top: 0; max-height: 100% !important; }
$.renderRows = function(fields, data, page, limit) {
  let $tbody = $('<tbody>');
  for (let index = ((page - 1) * limit); index < limit; index++) {
    let $row = $('<tr>');
    if (index < data.length) {
      $row.append(fields.map((field, col) => $('<td>').text(data[index][field])));
    } else {
      $row.append(fields.map((field, col) => $('<td>').html('&#32;')));
    }
    $tbody.append($row);
  }
  return $tbody;
};
(function($) {
  $.fn.renderTable = function(data, page, limit) {
    let fields = Object.keys(data[0]);
    return this.renderHeaders(fields)
      .renderRows(fields, data, page, limit)
      .renderFooter(page, limit, Math.ceil(data.length / limit), data.length, fields.length);
  };
  $.fn.renderHeaders = function(fields) {
    return this.append($.renderHeaders(fields));
  }
  $.fn.renderRows = function(fields, data, page, limit) {
    return this.append($.renderRows(fields, data, page, limit));
  };
  $.fn.renderFooter = function(page, limit, pages, total, colspan) {
    return this.append($.renderFooter(page, limit, pages, total, colspan));
  };
  $.tableFromJson = function(data, page, limit) {
    return $('<table>').renderTable(data, page, limit);
  };
  $.renderHeaders = function(fields) {
    return $('<thead>').append($('<tr>').append(fields
      .map(field => $('<th>').text(field))));
  };
  $.renderRows = function(fields, data, page, limit) {
    let $tbody = $('<tbody>');
    for (let offset = 0; offset < limit; offset++) {
      let index = ((page - 1) * limit) + offset,
          $row = $('<tr>');
      if (index < data.length) {
        $row.append(fields.map((field, col) => $('<td>').text(data[index][field])));
      } else {
        $row.append(fields.map((field, col) => $('<td>').html('&#32;')));
      }
      $tbody.append($row);
    }
    return $tbody;
  };
  $.renderFooter = function(page, limit, pages, total, colspan) {
    return $('<tfoot>')
      .append($('<tr>')
        .append($('<td>')
          .attr('colspan', colspan)
          .text([
            'Total: ' + total,
            'Page: ' + page + '/' + pages,
            'Limit: ' + limit
          ].join(', '))));
  };
})(jQuery);

var jsonData = [
  { "id": 1, "name": "John", "age": 24, "make": "Chevorlet", "model": "Silverado", "year": 2016 },
  { "id": 2, "name": "Jack", "age": 36, "make": "Toyota",    "model": "Corolla",   "year": 2018 },
  { "id": 3, "name": "Jill", "age": 29, "make": "Ford",      "model": "Escape",    "year": 2015 }
];

// Page 1 with a limit of 10 entries
$.tableFromJson(jsonData, 1, 10).addClass('stylized').appendTo('body');

答案 1 :(得分:0)

这是一个例子

var tableRowCount = 100;

@for(var i = 0; i < tableRowCount; i++)
{
    if (i < Model.Count )
    {
            <tr>
                <td>@exampleObject.Name<span class="rotate"><text class="button">@Html.ActionLink(HttpUtility.HtmlDecode("&#9998;"), "Edit", new { id = exampleObject.ID }, new { style = "color:Black" })</text></span></td>
                    <td>@exampleObject.Rooms</td>
                    <td>@exampleObject.Phone</td>
                    <td><text class="button" style="float:right">@Html.ActionLink(HttpUtility.HtmlDecode("&#9746;"), "Delete", new { id = exampleObject.ID }, new { style = "color:Black" })</text>@exampleObject.Location</td>
            </tr>
        }
    else
    {
        <tr>
            <td colspan="3" >&nbsp;</td>
        </tr>
    }
    }