Question

所以我使用div来创建一个表，并希望将表头的内容附加到表的各个相应单元格中。

所以在下面的例子中，＆＃34; 1个IPv4地址＆＃34;将成为＆＃34;云服务器：1个IPv4地址＆＃34;等等。

＆＃13;

	$table_header = $('header.table-row .table-cell');
	$table_cell = $('div.table-row .table-cell');

	$table_header.each(function(index, el) {
	  $table_cell.append($table_header);
	});

＆＃13;

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row > * {
  display: table-cell;
  vertical-align: middle;
  padding: 20px 0;
}
.table-row > *:first-child {
  padding-left: 30px;
}
.table-row > *:last-child {
  padding-right: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <header class="table-row">
    <div class="table-cell">Cloud Servers</div>
    <div class="table-cell">Minimum Hypervisor spec</div>
    <div class="table-cell">Storage</div>
    <div class="table-cell">Network</div>
    <div class="table-cell">Datacenters</div>
  </header>
  <div class="table-row">
    <div class="table-cell">1 IPv4 addresses</div>
    <div class="table-cell">Intel Xeon minimum 8 core</div>
    <div class="table-cell">Enterprise grade</div>
    <div class="table-cell">1Gbit for each HyperVisor</div>
    <div class="table-cell">UPS and Generator Backed</div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用.text( fn )或.html( fn )，具体取决于哪一个适合您的需要; index()方法有助于获取当前单元格的索引，然后您可以使用拉取相应的标题内容。

var $table_header = $('header.table-row .table-cell');
    var $table_cell = $('div.table-row .table-cell');

   $table_cell.text(function() {
        var i = $(this).index();
        return $table_header.eq( i ).text() + ': ' + $(this).text();
    });

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row > * {
  display: table-cell;
  vertical-align: middle;
  padding: 20px 0;
}
.table-row > *:first-child {
  padding-left: 30px;
}
.table-row > *:last-child {
  padding-right: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <header class="table-row">
    <div class="table-cell">Cloud Servers</div>
    <div class="table-cell">Minimum Hypervisor spec</div>
    <div class="table-cell">Storage</div>
    <div class="table-cell">Network</div>
    <div class="table-cell">Datacenters</div>
  </header>
  <div class="table-row">
    <div class="table-cell">1 IPv4 addresses</div>
    <div class="table-cell">Intel Xeon minimum 8 core</div>
    <div class="table-cell">Enterprise grade</div>
    <div class="table-cell">1Gbit for each HyperVisor</div>
    <div class="table-cell">UPS and Generator Backed</div>
  </div>
  <div class="table-row">
    <div class="table-cell">1 IPv4 addresses 2</div>
    <div class="table-cell">Intel Xeon minimum 8 core 2</div>
    <div class="table-cell">Enterprise grade 2</div>
    <div class="table-cell">1Gbit for each HyperVisor 2</div>
    <div class="table-cell">UPS and Generator Backed 2</div>
  </div>
</div>

Answer 2

以下代码也可以使用nth-of-type选择器：

for(var i = 1; i <= $("#tRows").find('.table-cell').length; i++){
    var headerVal = $('header').find('.table-cell:nth-of-type(' + i + ')').text();
    console.log(headerVal);
    var rowVal = $('#tRows').find('.table-cell:nth-of-type(' + i + ')').text();
    console.log(rowVal);
    $('#tRows').find('.table-cell:nth-of-type(' + i + ')').text(headerVal + ' ' + rowVal);
}

https://jsfiddle.net/suisgrand/tL8guy8o/

使用jquery每个函数将表头中的内容附加到表格单元格

2 个答案: