Получить одну конкретную строку в автоматически сгенерированной таблице - PullRequest
Новая
       7

Получить одну конкретную строку в автоматически сгенерированной таблице

0 голосов
/ 20 сентября 2018

Я создаю веб-приложение для школы.И мне нужно заполнить таблицу данными из базы данных.Для этого я использовал следующий 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,например, цена, я не могу провести различие между строками, потому что они имеют одинаковый идентификатор.Вот код, который я использую для получения цены строки: 

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

Но, очевидно, он возвращает только цену первой строки, а не ту, которую я хочу.Как я могу это сделать?

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Хорошо, я наконец понял, как это сделать, я использовал:

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

0 голосов
/ 20 сентября 2018

В вашей информации 'roomdata' должен быть какой-то идентификатор, который вы можете использовать в качестве идентификатора на.Как (roomdata ID 5), затем введите en с помощью $ ('# rd-5 td.price').

Не уверен, правильно ли я вас понял, но это самый простой способ.Всегда имейте уникальную ссылку и работайте с идентификаторами.

0 голосов
/ 20 сентября 2018

Вы можете достичь этого, как показано ниже: Добавьте индекс в свой forEach и используйте его в качестве идентификатора строки: 

    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());
...