Динамически создавать столбец и строку в HTML - PullRequest
Новая
       0

Динамически создавать столбец и строку в HTML

0 голосов
/ 30 мая 2020

У меня такая структура данных. и <param1> может повторяться. У нас может быть несколько значений param1 

<param>
  <param1>
    <name>
    <value>
  </param1>
  <param1>
    <name1>
    <value1>
    </param1>
</param>
I want to display in html dynamically like this(like column row ).  How can we do it ???        

name     name1
value    value1

Can someone suggest how to do it . I am new to this area

1 Ответ

0 голосов
/ 30 мая 2020

Решение должно быть 

<!DOCTYPE html>
<html>
<style>
param-list {
font-size : 20px;
display:inline-block;
border:1px solid gray;
}
param-list > *{
font-size : 20px;
display:block;
}
</style>
<body>

    <param-list>
        <my-name></my-name>
        <my-value></my-value>
    </param-list>
    <param-list>
        <my-name1></my-name1>
        <my-value1></my-value1>
    </param-list>

 <script>
class ParamList extends HTMLElement {
  connectedCallback() {
     this.children;
  }
}
customElements.define('param-list', ParamList); 

class Name extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `name`;
  }
}
customElements.define('my-name', Name);

class Name1 extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `name1`;
  }
}
customElements.define('my-name1', Name1);
class Value extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `value`;
  }
}
customElements.define('my-value', Value);

class Value1 extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `value1`;
  }
}
customElements.define('my-value1', Value1);
 </script>
</body>
</html>

в custom-element
ref: - https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
- Как создать собственные теги для html
- https://dev.to/jfbrennan/custom-html-tags-4788
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...