Question

我正在为学校构建一个Web应用程序。我需要用数据库中的数据填充表。为此，我使用了以下javascript：

        http.onload = function (){
        var roomData = JSON.parse(this.response);
        roomData.forEach(data => {
            var location=data.location;
            var price=data.price;
            var size=data.size;
            var available=data.available;
            var index = $("table tbody tr:last-child").index();
            var row = '<tr>' +
                '<td>'+location+'</td>' +
                '<td>'+size+'</td>' +
                '<td class="price">'+price+'</td>' +
                '<td>'+available+'</td>' +
                actions +

                '</tr>'
            $("table").append(row);

        });
        console.log((roomData));
    }
    http.open('GET', url, true);
    http.send();

该表具有以下架构：

 <table class="table table-bordered">
        <thead>
        <tr>
            <th>Address</th>
            <th>Size</th>
            <th>Price</th>
            <th>Available</th>
        </tr>
        </thead>
        <tbody>

        </tbody></table>

但是，当我尝试使用javascript访问一个特定数据（例如价格）时，由于行具有相同的ID，因此我无法真正区分行。这是我用来获取行价格的代码：

 $('td.price').html());

但是很明显，它仅返回第一行的价格，而不返回我想要的价格。我该怎么办？

Answer 1

您可以通过以下方式实现它：在您的forEach中添加索引，并将其用作行的ID：

    roomData.forEach(function (element, index) {
        var location=data.location;
        var price=data.price;
        var size=data.size;
        var available=data.available;
        var index = $("table tbody tr:last-child").index();
        var row = '<tr>' +
            '<td>'+location+'</td>' +
            '<td>'+size+'</td>' +
            '<td id="pricerow' + index + '" class="price">'+price+'</td>' +
            '<td>'+available+'</td>' +
            actions +

            '</tr>'
        $("table").append(row);

    $('#pricerow1').html());
    $('#pricerow2').html());

Answer 2

好，我终于想出了办法，我用过：

var rows = document.getElementsByTagName('tr'); console.log(rows[$(this).closest("tr").index()+1].cells[2].innerHTML);

Answer 3

您的“ roomdata”信息应具有某种ID，您可以将其用作ID。像（roomdata ID 5）一样，然后用$（'＃rd-5 td.price'）访问它。

不确定我是否正确理解您的语言，但这是最简单的方法。始终具有唯一的引用并使用ID。

在自动生成的表格中获取特定行

3 个答案: