使用jQuery的每個函數將表頭的內容追加到表格單元

Question

因此，我使用div創建表格並希望將表格頭的內容附加到表格的各個對應單元格。

因此，在我的示例中，「1 IPv4地址」將成爲「雲服務器：1 IPv4地址」等。

\t $table_header = $('header.table-row .table-cell'); 
 
\t $table_cell = $('div.table-row .table-cell'); 
 

 
\t $table_header.each(function(index, el) { 
 
\t $table_cell.append($table_header); 
 
\t });

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

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

下面的代碼將它也使用第n-的類型選擇做：

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/