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

时间：2018-04-20 08:56:02

标签： jquery html-table custom-data-attribute

我想在表格中找到具有特定数据属性的单元格，并在该单元格上叠加文本。我的问题是我的桌子不再正确显示了。

＆＃13;
＆＃13; 
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);
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我希望我的桌子实际上是这样的：

enter image description here

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

＆＃13;
＆＃13; 
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();
＆＃13; 
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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以使用每个循环（以下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>

相关问题
最新问题