Question

我有一个由div组成的表，我试图将表头内容添加到每个要用于移动设备的单元格的数据属性上。

但是我的表在每个单元格后显示[Object Object]。我对jQuery效率不高，所以任何帮助都会受到赞赏。

＆＃13;

    var $table_header = $('.tech-specs header.table-row .table-cell');
    var $table_cell = $('.tech-specs div.table-row .table-cell');
    $table_cell.text(function() {
      var i = $(this).index();
      return $(this).text() + $(this).attr('data-title', $table_header.eq(i).text());
    });

＆＃13;

.table {
    display: table;
    width: 100%;
}
.table-row {
    display: table-row;
    width: 100%;
}
.table-row > * {
    display: table-cell;
    padding: 20px 8px;
    position: relative;
    vertical-align: middle;
}
header.table-row {
    background: #37bb1f;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table tech-specs five-cells">
  <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">Auto failover</div>
    <div class="table-cell">ECC registered RAM</div>
    <div class="table-cell">HP Powered</div>
    <div class="table-cell">Global Network with over 200Gbit of capacity</div>
    <div class="table-cell">Managed by in-house staff</div>
  </div>
</div>

＆＃13;

Answer 1

如果您不想更改属性，请使用.attr( attributeName, function )

$table_cell.attr('data-title', function() {
  var i = $(this).index();
  return $table_header.eq(i).text();
});

$(this).attr('data-title', $table_header.eq(i).text())返回jQuery对象，然后你附加了[Object Object]

$table_cell.text(function() {
  var i = $(this).index();
  var text = $table_header.eq(i).text(); //Get the text
  $(this).attr('data-title', text); //set it as attribute value 
  return $(this).text() + text;
});

var $table_header = $('.tech-specs header.table-row .table-cell');
var $table_cell = $('.tech-specs div.table-row .table-cell');
$table_cell.text(function() {
  var i = $(this).index();
  var text = $table_header.eq(i).text()
  $(this).attr('data-title', text);
  return $(this).text() + text;
});

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row > * {
  display: table-cell;
  padding: 20px 8px;
  position: relative;
  vertical-align: middle;
}
header.table-row {
  background: #37bb1f;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table tech-specs five-cells">
  <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">Auto failover</div>
    <div class="table-cell">ECC registered RAM</div>
    <div class="table-cell">HP Powered</div>
    <div class="table-cell">Global Network with over 200Gbit of capacity</div>
    <div class="table-cell">Managed by in-house staff</div>
  </div>
</div>

Answer 2

在表格单元格中，您也不会尝试更改文本。你需要的是为该div设置一个属性。所以你不必返回任何数据。只需设置如下属性：

＆＃13;

var $table_header = $('.tech-specs header.table-row .table-cell');
    var $table_cell = $('.tech-specs div.table-row .table-cell');
    $table_cell.text(function() {
      var i = $(this).index();
      $(this).attr('data-title', $table_header.eq(i).text());
      //return $(this).text() + $(this).attr('data-title', $table_header.eq(i).text());
    });

＆＃13;

.table {
    display: table;
    width: 100%;
}
.table-row {
    display: table-row;
    width: 100%;
}
.table-row > * {
    display: table-cell;
    padding: 20px 8px;
    position: relative;
    vertical-align: middle;
}
header.table-row {
    background: #37bb1f;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table tech-specs five-cells">
  <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">Auto failover</div>
    <div class="table-cell">ECC registered RAM</div>
    <div class="table-cell">HP Powered</div>
    <div class="table-cell">Global Network with over 200Gbit of capacity</div>
    <div class="table-cell">Managed by in-house staff</div>
  </div>
</div>

＆＃13;

从jQuery .text（）接收[Object Object]

2 个答案: