创建自定义表行 [英] Creating a custom table row

问题描述

我正在尝试创建一个自定义表格行，但很难让它正常运行。我尝试了以下两种方法，它们给出了奇怪的结果。我意识到没有自定义元素这很容易，但这是一个更大的项目的一个小例子。我可以更改什么来实现所需的结果？

  class customTableRow extends HTMLElement { constructor（）{super（）; var shadow = this.attachShadow（{mode：'open'}）; this.tableRow = document.createElement（'tr'）; var td = document.createElement（'td'）; td.innerText =RowTitle; this.tableRow.appendChild（TD）; var td2 = document.createElement（'td'）; td2.innerText =RowContent; td2.colSpan = 4; this.tableRow.appendChild（TD2）; shadow.appendChild（this.tableRow）; customElements.define（'custom-tr'，customTableRow）; //尝试2var newTr = new customTableRow; document.getElementById（'table2Body'）。appendChild（newTr）;  

  td {border：1px solid black;}  

< pre class =snippet-code-html lang-html prettyprint-override> < span>尝试1：< / span>< table> < THEAD> < TR> <第 - 酮< /第> <的第i;二< /第> <的第i;三< /第> <的第i;四< /第> <的第i;五< /第> < / TR> < / THEAD> < TBODY> < custom-tr /> < / tbody的> < / table>< hr>< span>尝试2：< / span>< table id =table2> < THEAD> < TR> <第 - 酮< /第> <的第i;二< /第> <的第i;三< /第> <的第i;四< /第> <的第i;五< /第> < / TR> < / THEAD> < tbody id =table2Body><！ - 它应该附加在这里 - > < / tbody的> < / table>< hr>< span>这就是我想要的样子：< / span>< table id =table2> < THEAD> < TR> <第 - 酮< /第> <的第i;二< /第> <的第i;三< /第> <的第i;四< /第> <的第i;五< /第> < / TR> < / THEAD> < TBODY> < TR> < td>行标题< / td> < td colspan =4>行内容< / td> < / tbody的> < / table>

解决方案

A < table> 元素及其子组件< tbody> ，< tr> 需要非常具体的语法。例如，只有< tr> 元素被授权为< tbody> 的子元素。

因此，您无法定义元素并将其插入< tbody> 或< ;表> 。如果你这样做，它将在解析时被移到< table> 之外。因此，显示您的第一个示例（查看开发工具中的代码）。

相反，您应该定义自定义标记，而不是像< a href =https://stackoverflow.com/a/41587119/4600982>对类似问题的回答。

或者你应该重新定义一个完整的自定义表格结构，包含< custom-table> ，< custom-tbody> ...就像在< a href =https://stackoverflow.com/a/41592251/4600982>这个其他答案。

另外，你应该使用结束标记< custom-tr>< / custom-tr> ，如果您希望在其中应用CSS源规则，请将其插入Shadow DOM中。

I am trying to create a custom table row but having difficulty getting it to behave properly. I've tried the two below methods and they give bizarre results. I realize that this is very easy to to without custom elements but this is a small example of a much larger project. What can I change to achieve the desired result?

class customTableRow extends HTMLElement {
  constructor(){
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    
    this.tableRow = document.createElement('tr');
    

    var td = document.createElement('td');
    td.innerText = "RowTitle";
    this.tableRow.appendChild(td);
    
    var td2 = document.createElement('td');
    td2.innerText = "RowContent";
    td2.colSpan = 4;
    this.tableRow.appendChild(td2);

    shadow.appendChild(this.tableRow);
  }
  
}

customElements.define('custom-tr', customTableRow);

//Attempt 2
var newTr = new customTableRow;
document.getElementById('table2Body').appendChild(newTr);

td {
  border: 1px solid black;
}

<span>Attempt 1:</span>
<table>
  
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <custom-tr />
  </tbody>
  
</table>

<hr>

<span>Attempt 2:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody id="table2Body">
<!--     It should append here -->
  </tbody>
  
</table>

<hr>

<span>This is how I want it to look:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Row Title</td>
      <td colspan="4">Row Content</td>
  </tbody>
  
</table>

解决方案

A <table> element and its subcomponents <tbody>, <tr> require a very specific syntax. For example, only <tr> elements are authorized as children of <tbody>.

Therefore you cannot define a element and insert it in <tbody> or <table>. If you do that it will be moved outside of the <table> at parsing. Hence the display of your first example (look the code in the Dev Tools).

Instead you should define a customized tag instead like in this answer to a similar question.

Or you should redefine a complete custom table structure with <custom-table>, <custom-tbody>... like in this other answer.

Also, you should use closing tag <custom-tr></custom-tr>, and insert your CSS rule in the Shadow DOM if you want it to by applied inside it.

这篇关于创建自定义表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！