HTML table 行数可变

Question

我有一个包含可变行数的数组，我正在尝试创建一个 table。 table 将位于弹出窗口 window (SweetAlert) 内，行来自 AJAX 调用，该调用正在获取 PHP 数据库查询。查询已发送并可以使用 console.log 查看，但我不知道如何根据需要格式化和循环多次，最好只使用 html 和 js.

$.ajax({
                    url:"../model/test.php",
                    data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId},
                    type: 'GET',
                    success: function(result){
                        result = JSON.parse(result);
                        console.log(result);
                        
                        Swal.fire({
                            html: `<p><h5>` + custId + `</h5></p><br>` + startDate + `&nbsp;&nbsp;&nbsp;` + endDate + `<br>
                            <table class="table-datatable display responsive nowrap table-bordered table-striped">
                            <tbody>`,
                            //This is the idea of what I'm trying to accomplish
                            for (let index = 0; index < result.length; ++index)
                            {
                                `<tr>
                                    <td>` + result[index]['item'] + `</td>
                                    <td>`+result[index]['count']+`</td>
                                </tr>`
                            }
                            `</tbody>
                            </table>`
                        })
                    }
                })

数据库中只有两列call/table。我可能可以得到很好的长度，只是不确定如何在 Swal.fire() 调用的 html 部分创建它。

Answer 1

我已经正确地“组装”了您的代码。试试这个

$.ajax({
    url:"../model/test.php",
    data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId},
    type: 'GET',
    success: function(result){
        result = JSON.parse(result);
        console.log(result);
        
        // create the result as array of rows
        let rows = result.map(obj => `<tr><td>${obj.item}</td><td>${obj.count}</td></tr>`);

        Swal.fire({
            html: `<p><h5>${custId}</h5></p><br>${startDate}&nbsp;&nbsp;&nbsp;${endDate}<br>
            <table class="table-datatable display responsive nowrap table-bordered table-striped">
                <tbody>
                    ${rows.join('')}
                </tbody>
            </table>`
        })
    }
})

Answer 2

我只需要在 javascript 部分创建一个带有 html 的字符串，如果其他人遇到同样的问题。

$.ajax({
                    url:"../model/test.php",
                    data: {'order-startDate': startDate, 'order-endDate' : endDate, 'order-custId' : custId},
                    type: 'GET',
                    success: function(result){
                        result = JSON.parse(result);
                        console.log(result);
                        let input = "";
                        for (let i = 0; i < result.length; i++)
                            input += `<td>` + result[i]['item_sku'] + `</td><td>`+result[0]['count']+`</td>`;
                        Swal.fire({
                            html: `<p><h5>` + custId + `</h5></p><br>` + startDate + `&nbsp;&nbsp;&nbsp;` + endDate + `<br>
                            <table class="table-datatable display responsive nowrap table-bordered table-striped">
                            <tbody>
                                ` + input + `
                            </tbody>
                            </table>`
                        })
                    }
                })

Answer 3

问题已经回答，所以我不会回答，而是留下一个类似的场景，它使用相同的逻辑来显示数据，但这个场景来自 API 调用，因为从 OP 代码无法查看如何处理实际数据结果。

//I can't make an AJAX call to your data source (`test.php`) so instead I'll make an API call and display the data in a table on a SweetAlert popup
$( document ).ready(function() {
var tableRows = '';
  $.ajax({
        url: 'https://api.covid19api.com/summary',
        contentType: "application/json",
        dataType: 'json',
        success: function(result){
            for(let i = 0; i < result.Countries.length; i++){
               tableRows += '<tr><td>'+result.Countries[i]['Country']+'</td><td>'+result.Countries[i]['TotalConfirmed']+'</td></tr>';
            }
            
            
            
            Swal.fire({
  title: '<strong><u>Covid Cases Per Country</u></strong><br/>',
  icon: 'info',
  html: '<table class="table-datatable display responsive nowrap table-bordered table-striped w-100">' +
        '<thead><th>Country</th><th>Covid-19 Cases</th></thead>' +
        '<tbody class="table-body">' +
        
        '</tbody>' +
         '</table>'
})

        $('.table-body').html(tableRows);
        }
    })
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.0/dist/sweetalert2.all.min.js"></script>

HTML table 行数可变

HTML table with a variable amount of rows

html

javascript

php

jquery

sweetalert2