Блог

Я пытаюсь выяснить, как я могу перенести массив с несколькими переменными в таблицу HTML, используя только javascript. Мой код javascript до сих пор отображает все на странице, и я не хочу, чтобы отображались теги типа и тому подобное. Результат должен выглядеть примерно так [table_example_image] .

Инструкции:

Используя JavaScript, перебирайте элементы в массиве и динамически отображайте коллекцию в таблице в разделе вашей веб-страницы.

Вся таблица (включая замену любого текста true / false реальными изображениями, как в примере) и содержимое должны быть сгенерированы и выведены с помощью JavaScript.

Внутри таблицы создайте элемент для каждого из свойств в коллекции массива (например, title, author, alreadyRead) — количество столбцов и текст должны быть динамически сгенерированы на основе JavaScript, а не «жестко закодированы».

Создайте и добавьте a для каждого значения Используйте JavaScript для добавления и создания правил стиля для таблицы в разделе HTML-документа.

Любые советы будут оценены!

     var books = [
    {
        title: 'The Stranger',
        author: 'Albert Camus',
        alreadyRead: true
    },
    {
        title: 'Binging with Babish',
        author: 'Andrew Rea',
        alreadyRead: true
    },
    {
        title: 'You Suck at Cooking: The Absurdly Practical Guide to Sucking Slightly Less at Making Food: A Cookbook',
        author: 'You Suck at Cooking',
        alreadyRead: false
    }];

createTable();

function createTable() {
    var table = document.createElement("table");  //makes a table element for the page

    table  = "<tr class='firstRow'><th>Title</th><th>Author</th><th>Read?</th></tr>";  //adds the first row that contains the sections for the table

    for (var i = 0; i < books.length; i  )  //loops through the array 
    {
        //add info from the array into this
        table  = "<tr><td>"   books[i].title   "</td><td>";
    }

    document.body.append(table);
}
 

В данный момент вы пытаетесь добавить строку в объект таблицы. Проверьте эту страницу.

 function createTable() {

    var headers = ["Title", "Author", "Read?"];
    var table = document.createElement("TABLE");  //makes a table element for the page
        
    for(var i = 0; i < books.length; i  ) {
        var row = table.insertRow(i);
        row.insertCell(0).innerHTML = books[i].title;
        row.insertCell(1).innerHTML = books[i].author;
        row.insertCell(2).innerHTML = books[i].alreadyRead;
    }

    var header = table.createTHead();
    var headerRow = header.insertRow(0);
    for(var i = 0; i < headers.length; i  ) {
        headerRow.insertCell(i).innerHTML = headers[i];
    }

    document.body.append(table);
}
 

Чтобы добавить строковые теги к родительскому тегу,

ParentTag.innerHTML = stringifiedTag;

Надеюсь, это полезно.

   var books = [
    {
        title: 'The Stranger',
        author: 'Albert Camus',
        alreadyRead: true
    },
    {
        title: 'Binging with Babish',
        author: 'Andrew Rea',
        alreadyRead: true
    },
    {
        title: 'You Suck at Cooking: The Absurdly Practical Guide to Sucking Slightly Less at Making Food: A Cookbook',
        author: 'You Suck at Cooking',
        alreadyRead: false
    }];

createTable();

function createTable() {
    var table = document.createElement("table");  //makes a table element for the page
    let innerT = "";
    
    innerT  = "<tr class='firstRow'><th>Title</th><th>Author</th><th>Read?</th></tr>";  //adds the first row that contains the sections for the table

    for (var i = 0; i < books.length; i  )  //loops through the array 
    {
        //add info from the array into this
        innerT  = "<tr><td>"   books[i].title   "</td><td>";
    }
    table.innerHTML = innerT;
    
    document.body.append(table);
} 

вам нужно использовать insertAdjacentHTML(), а не ‘ =‘

пример :

        var books = [
        {
            title: 'The Stranger',
            author: 'Albert Camus',
            alreadyRead: true
        },
        {
            title: 'Binging with Babish',
            author: 'Andrew Rea',
            alreadyRead: true
        },
        {
            title: 'You Suck at Cooking: The Absurdly Practical Guide to Sucking Slightly Less at Making Food: A Cookbook',
            author: 'You Suck at Cooking',
            alreadyRead: false
        }];
    
    
    function createTable() {
        let table = document.createElement("table");  //makes a table element for the page
        
        table.insertAdjacentHTML("beforeend","<tr class='firstRow'><th>Title</th><th>Author</th><th>Read?</th></tr>"); //adds the first row that contains the sections for the table
    
        for (var i = 0; i < books.length; i  )  //loops through the array 
        {
            //add info from the array into this
            table.insertAdjacentHTML("beforeend","<tr><td>"   books[i].title   "</td><td>");
        }
    
        document.body.append(table);
    }
    
    createTable();