如何将文本附加到 table 单元格，并将其覆盖在多个单元格上？

Question

我想在 table 中找到具有特定数据属性的单元格，并在该单元格上覆盖文本。我的问题是我的 table 不再正确显示。

var name = $('[data-id="12"]').attr("data-name");
var length = $('[data-id="12"]').length;
$('[data-id="12"]').first().append(name);
$('[data-id="12"]').first().attr('colspan', length);

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  overflow: scroll;
  overflow: auto;
}

div.wrapper {
  width: 400px;
  overflow: auto;
}

td {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table style="width:600px">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
      <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
      <td data-id="12" data-name="elephant" style="background-color:pink"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

我想要我的 table 实际上是这样的：

Answer 1

您需要删除最后两个 td 和 [data-id="12"] 没有 colspan 属性：

var name = $('[data-id="12"]').attr("data-name");
var length = $('[data-id="12"]').length;
$('[data-id="12"]').first().append(name);
$('[data-id="12"]').first().attr('colspan',length);
$('[data-id="12"]').not(":first" ).remove();

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    overflow: scroll; /* Scrollbar are always visible */
overflow: auto;
}

div.wrapper {
  width: 400px;
  overflow: auto;
}

td{height:20px; overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:center}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
 <table style="width:600px">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
    <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
    <td data-id="12" data-name="elephant" style="background-color:pink"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table> 
</div>

Answer 2

var name = $('[data-id="12"]').attr("data-name");
var length = $('[data-id="12"]').length;
var td = '<td data-name="elephant" style="background-color:pink;border-right-color:pink" colspan="'+length+'">'+name+'</td>';
$('[data-id="12"]').first().before(td);
$('[data-id="12"]').remove();

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    overflow: scroll; /* Scrollbar are always visible */
overflow: auto;
}

div.wrapper {
  width: 400px;
  overflow: auto;
}

td{height:20px; overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:center}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
 <table style="width:600px">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
    <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
    <td data-id="12" data-name="elephant" style="background-color:pink"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table> 
</div>

Answer 3

您可以使用每个循环（下面 js 中的注释）：

var $tds = $('[data-id="12"]'); // get tds

$tds.each(function(index, item) { // loop tds
  var $this = $(item);
  if (index === 0) { // set colspan and text in first td
    $this.attr('colspan', $tds.length).append($this.data("name"));
  } else {
    $this.remove(); // remove others
  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  overflow: scroll;
  /* Scrollbar are always visible */
  overflow: auto;
}

div.wrapper {
  width: 400px;
  overflow: auto;
}

td {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table style="width:600px">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
      <td data-id="12" data-name="elephant" style="background-color:pink;border-right-color:pink"></td>
      <td data-id="12" data-name="elephant" style="background-color:pink"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

如何将文本附加到 table 单元格，并将其覆盖在多个单元格上？

How can I append text to a table cell, overlay it over multiple cells?

jquery

html-table

custom-data-attribute