работать над каждым td каждый отдельно внутри tr l oop при загрузке данных из json файла - PullRequest
Новая
       31

работать над каждым td каждый отдельно внутри tr l oop при загрузке данных из json файла

1 голос
/ 05 августа 2020

Я создал код для преобразования данных json в html таблицу, используя javascript и ajax: (столбец 1 - текст, столбец 2 - ссылка, столбец 4 - ссылка на изображение)

Данные: 

[
["Product_1_Title", "www.website1.com", 20, "https://images-na.ssl-images-amazon.com/images/I/81b1roZwACL._AC_SL1500_.jpg"],
["Product_2_Title", "www.website2.com", 50, "https://images-na.ssl-images-amazon.com/images/I/71W1KvLH3sL._AC_SL1500_.jpg"],
...
]

Это код, он работает хорошо, но в результате таблицы я хочу скрыть столбец 2 и поместить ссылку в столбец 2 в привязку в столбце 1, чтобы заголовок стал интерактивным link и поместите ссылку на изображение в столбец 4 в sr c, чтобы изображение отображалось в ячейке. 

    <body>
        
        <table id="tab">
            <thead>
                <tr>
                    <th>column_1</th>
                    <th>column_2_link</th>
                    <th>column_3</th>
                    <th>column_4_link</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
  
        <script type="text/javascript">
        const TabBody = document.querySelector("#tab > tbody") 
        function loadData() {
            const request = new XMLHttpRequest();
            request.open("get", "rows.json");
            request.onload = () => {
                try {
                    const json = JSON.parse(request.responseText);
                    populateTable(json);
                    }  catch (e) {
                        console.warn("error");
                    }   
                };
                
            request.send();
        }
        function populateTable(json){
            
            while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}

            json.forEach((row) => { 
                const tr = document.createElement("tr");
                

                row.forEach((cell) => {
                    const td = document.createElement("td");
                    
                    // I tried this and it put the link text inside <a>
                    // td.innerHTML = /.com\//g.test(cell)
                    // ? `<a href="https://${cell}">${cell}</a>`
                    // : cell;

                    // and tried this and it put the link text inside <img>
                    td.innerHTML = /alicdn.com/g.test(cell)
                    ? `<img src="https://${cell}" class="img-fluid"/>`
                    : cell;

                    tr.appendChild(td);})
                
                TabBody.appendChild(tr);
            })            
        }
        document.addEventListener("DOMContentLoaded", () => { loadData();})
    </script>

  </body>

1 Ответ

0 голосов
/ 05 августа 2020

Вместо перебора ячеек, если вы знаете положение столбцов в массиве, вы можете жестко закодировать строку. 

function populateTable(json){
    while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
    json.forEach((row) => { 
        const tr = document.createElement("tr");
        let td = document.createElement("td");
        td.innerHTML = `<a href='${row[1]}'>${row[0]}</a>`
        tr.appendChild(td);  
        td = document.createElement("td");              
        td.innerHTML = row[2];
        tr.appendChild(td);   
        td = document.createElement("td");
        td.innerHTML = `<img src="https://${row[3]}" class="img-fluid"/>`;
        tr.appendChild(td);   
        TabBody.appendChild(tr);
    })
}

И вынуть второй столбец в таблице вместо того, чтобы скрывать его 

<thead>
    <tr>
        <th>column_1</th>
        <th>column_2</th>
        <th>column_3_link</th>
    </tr>
</thead>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...