Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2018, 20:30
Аспирант
Отправить личное сообщение для Marson Посмотреть профиль Найти все сообщения от Marson
 
Регистрация: 14.08.2018
Сообщений: 65

Сделать HTML-конструктор из деревянной структуры
var someTree = {
    tagName: "table", //html tag
    subTags: [ //вложенные тэги
        {
                    tagName: "tr",
                    subTags: [
                        {
                            tagName: "td",
                            text: "some text",
                        },
                        {
                            tagName: "td",
                            text: "some text 2",
                        }
                    ]
        }
    ],
    attrs: 
    {
        border: 1,
    },
}


Помогите дописать код, нужно с рекурсией, вот мой код:

var someTree = {
    tagName: "table", //html tag
    subTags: [ //вложенные тэги
        {
                    tagName: "tr",
                    subTags: [
                        {
                            tagName: "td",
                            text: "some text",
                        },
                        {
                            tagName: "td",
                            text: "some text 2",
                        }
                    ]
        }
    ],
    attrs: 
    {
        border: 1,
    },
}

function walker(node, nestedFieldName, deepness, callback){
    callback(node, nestedFieldName, deepness);
    if (nestedFieldName in node){
        for (key in node[nestedFieldName]){
            walker(node[nestedFieldName][key], nestedFieldName, deepness +1, callback)
        }
    }
}

var str = "";
walker(someTree, "subTags", 0, function(node, nestedFieldName, deepness){
    str += "  ".repeat(deepness) + node.tagName + "\n";
});

console.log(str);


Должно получиться:

<table border=1>
<tr>
<td>some text</td>
<td>some text 2</td>
</tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2018, 21:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

дерево создание элементов
Marson,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
  <script>
var someTree = {
    tagName: "table",
    subTags: [{
        tagName: "tr",
        subTags: [{
            tagName: "td",
            text: "some text"
        }, {
            tagName: "td",
            text: "some text 2"
        }]
    }],
    attrs: {
        border: 1
    }
};

function createElem(tagName, attrs, text) {
    var elem = document.createElement(tagName);
    if (attrs)
        for (var name in attrs) elem.setAttribute(name, attrs[name]);
    if (text) elem.textContent = text;
    return elem
}

function walker(tree) {
    var tagName = tree.tagName,
        attrs = tree.attrs,
        text = tree.text,
        elem = createElem(tagName, attrs, text);
    if (tree.subTags) tree.subTags.forEach(function(el) {
        el = walker(el);
        elem.appendChild(el)
    });
    return elem
}
var table = walker(someTree);
document.body.appendChild(table);
  </script>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
Как сделать ссылку для скачивания html файла m-mikle Общие вопросы Javascript 26 19.01.2015 18:04
нужно js сделать с тайм аутом в 15 часов и склеить его с html кодом stewie6630 Работа 2 20.10.2013 21:49
Условие для структуры html кода qazibum Элементы интерфейса 3 09.09.2012 10:22
Помогите сделать регулярку для HTML шаблона zeraid Общие вопросы Javascript 1 25.12.2011 15:28