Odebranie po stronie frontendu listy produktów i ich wyświetlenie w formie tabelki

0

Mam zamiar po stronie backendu wyszukać odpowiednio listę produktów i po stronie forntu za pomocą jQuery to zwrócić wykorzystując mechanizm asynchroniczności (ajax). Tylko pytanie jeśli chcę odebrać to w formie tabelki to czy tą tabelkę stworzyć jako table w html czy mogę to zrobić jakoś za pomocą divów? Bo wiadomo jeśli skorzystam z table to łatwiej te dane będzie pobrać do tabelki za pomocą jQuery, natomiast będzie problem z ostylowaniem tego, ponieważ elementy tabelki w htmlu są traktowane jako blokowe. Natomiast jeśli tabelkę zrobię w html jako divy to jest problem z przypisaniem tych danych do tych divow za pomocą jQuery.

Co poradzicie?

0
  1. Możesz stylami zrobić, aby elementy tabelki nie były blokowe - CSS ma polecenie display przecież;
  2. Jeśli coś jest danymi tabelarycznymi, to raczej powinno się używać znacznika <table>, a nie divów;

Z twojego opisu nie widzę dlaczego miałby być problem ze stylowaniem, pokaż jakiś kod może?

0
function searchResult(data) {
            $("#searchResults").show();
            $("html, body").animate({ scrollTop: $('#search').offset().top }, 800);
            $('#tableResults tbody').html('');
            for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    $("#tableResults").find('tbody')
                        .append($('<tr>')
                            .append($('<td>')
                                .addClass('nameCompany')
                                .append(data[i].CompanyName)
                                .append($('<br>'))
                                .append($('<button>')
                                    .addClass('showOnMap')
                                    .click(e => showOnMap(data[i]))
                                    .html('POKAŻ NA MAPIE')
                                )
                            )
                            .append($('<td>')
                                .addClass('address')
                                .append(data[i].CompanyAddress)
                            )
                            .append($('<td>')
                                .addClass('phoneNumber')
                                .html('tel. ')
                                .append(data[i].PhoneNumber)
                            )
                            .append($('<td>')
                                .addClass('installationPrice')
                                .append(data[i].PriceInstallation)
                            )
                        );
                }
            };
        }
#tableResults {
  margin-top: 65px;
}
#tableResults thead tr th {
  color: #909090;
  display: inline-block;
  font-family: Arial Narrow, sans-serif;
  font-style: italic;
  font-size: 16px;
  margin-left: 270px;
  margin-bottom: 20px;
}
#tableResults thead tr th.firstHeaderTable {
  margin-left: 280px;
}
#tableResults tbody tr {
  margin-left: 280px;
  background-color: white;
  height: 180px;
  width: 1340px;
  display: inline-block;
  margin-bottom: 30px;

}
#tableResults tbody tr:hover {
  background-color: #A9A9A9;
}
#tableResults td {
  font-family: Arial Narrow, sans-serif;
  font-size: 18px;
  text-align: center;
}
#tableResults td.nameCompany {
  color: #cc8400;
  padding-top: 40px;
  padding-left: 60px;
  font-style: italic;
  font-weight: bold;
  width: 250px;
}
#tableResults td .showOnMap {
  background-color: white;
  border: 2px solid #cc8400;
  margin-top: 35px;
  width: 170px;
  height: 35px;
  font-size: 16px;
}
#tableResults td .showOnMap:hover {
  cursor: pointer;
}
#tableResults td.address {
  vertical-align: middle;
  padding-top: 55px;
  padding-left: 120px;
  width: 180px;
  color: #2e2e2e;
  font-size: 22px;
}
#tableResults td.phoneNumber {
  vertical-align: middle;
  padding-top: 65px;
  padding-left: 200px;
  color: #2e2e2e;
  font-size: 22px;
  width: 130px;
}
#tableResults td.installationPrice {
  vertical-align: middle;
  padding-top: 55px;
  padding-left: 200px;
  color: #cc8400;
  font-weight: bold;
  font-size: 30px;
  width: 140px;
}

Jak to zrobić aby napis w każdej komórce td był tak samo wyrównany? Bo obecnie tak nie jest.

1 użytkowników online, w tym zalogowanych: 0, gości: 1