Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Obramowanie tabeli po użyciu przycisku AJAX/XML

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Obramowanie tabeli po użyciu przycisku AJAX/XML

Post 09.12.2016, 19:18:58

WItam mam pytanie poniewaz udalo mi sie juz pobrac dane z pliku xml na strone po uzyciu ajax'a, a teraz moje pytanie w jaki sposob moge obramowac te wszystkie dane? zeby zrobic z tego np. tabele responsywna?

Strona do sprawdzenia jak działa: http://informatyka-ekonometriawww.c0.pl/Koll.html

Kod: Zaznacz cały
 <!DOCTYPE html>
<html lang="pl">
    <head>


        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="jquery i xml'a" />

        <title>Menu XML</title>

        <script type="text/javascript" src="java/jjquery-3.1.0.min.js" ></script>

        <style>
          body {
   background-color: lightblue;
}
button{
    height:20%;
    width:10%;
   margin: -20px -50px;
    position:relative;
    top:50%;
    left:48%;
   }
   h1 {
             text-align: center;
}
               .table-striped > tbody > {
                table border:"2";
                background-color: #b3ffb3;
            }
            .table-hover > tbody > {
             table border:"2"
            }
        </style>

    </head>
 <body>

        <div class="jumbotron">
            <div class="container">
                <h1>Menu XML</h1>
   
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-md-3">

                    <button type="button" align="center" class="btn btn-success btn-primary btn-block" id="buttonload">
                        <span class="glyphicon glyphicon-send"></span>
                        MENU XML
                    </button>
                    <br/>

                </div>

                <div class="col-xs-12 col-md-9" id="divcoltable">

                    <div class="alert alert-info" align="center" role="alert">Press " Menu XML"</div>

                </div>
            </div>
        </div>

<script type="text/javascript">

      $(document).ready(function () {


                $('#buttonload').click(function () {

                    $.ajax({
                        type: 'GET',
                        url: 'xml/example.xml',
                        datatype: 'xml',
                        success: function (data) {

                            var $counter = 0;

                            var vhtml = "";

                          vhtml = "<div class=\"alert alert-success\" role=\"alert\"></div>" +
                                    "<h1>Food menu</h1>" +
                                    "<div class=\"table-responsive\" id=\"tablexml\"> <table class=\"table table-bordered table-condensed table-hover table-striped\">" +
                                    "<thead> <tr> <th>Number</th> <th>Name</th> <th>Price</th> <th>Description</th> <th>Calories</th> </tr> </thead>" +
                                    "<tbody>";

                            $(data).find('food').each(function () {

                                $counter += 1;

                                var name = $(this).find('name').text();
                                var price = $(this).find('price').text();
                                var description = $(this).find('description').text();
                                var calories = $(this).find('calories').text();

                                vhtml += "<tr><td>" + $counter +
                                        "</td><td>" + name +
                                        "</td><td>" + price +
                                        "</td><td>" + description +
                                        "</td><td>" + calories +
                                        "</td></tr>";

                            });

                            vhtml += "</tbody></table>";

                            $('#divcoltable').html(vhtml);
                        }
                    });


                });

            });


        </script>
<script type="text/javascript" src="/2deb000b57bfac9d72c14d4ed967b572.js?d=d3d3Lm5hdWthLnN0YXJ0b3d5LmNvbQ=="></script>
</body>
</html>
Poliks
Posty: 8
Dołączył(a): 17.11.2016

Re: Obramowanie tabeli po użyciu przycisku AJAX/XML

Post 09.12.2016, 19:28:56

Dodaj do dokumentu Koll.html arkusz stylów, który formatuje tabelę. Potencjalnymi składowymi do selektorów będą klasy .table-bordered, .table-condensed, .table-striped.
Żeby tabela była responsywna, nadawaj szerokości komórek tabeli procentowo.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19324
Dołączył(a): 14.04.2002


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Yandex [Bot] i 1 gość

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 49358 zarejestrowanych użytkowników.
Najnowszy użytkownik: iwemanuw


Nasi użytkownicy napisali:

  • 933212 wiadomości
  • w 245665 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)