Aaron Aaron - 2 months ago 12
jQuery Question

Using jquery each function to append content from table head to table cell

So I'm using divs to create a table and would like to append the content of the table head to the individual corresponding cells of the table.

So in my example below "1 IPv4 addresses" would become "Cloud Servers: 1 IPv4 addresses" and so on.



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

.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

You can use either .text( fn ) or .html( fn ) depending on which one suits your needs; the index() method helps get the index of the current cell which you can then use the pull the corresponding header content.

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>

Comments