How to display XML data in an HTML table

Asked

Viewed 1,242 times

0

I would like the XML data to be displayed in a common HTML table with TR and TD, because with the code I’m using the information gets confused.

Follow the code I used: 

$(function(){
       $.ajax({
        url : "livraria.xml",
        success : function(xml){

            $(xml).find("livro").each(function() {
                $("#tabela").append(
                  "Titulo: " +"<br/>"+
                     "</td></tr>"+  $(this).attr("id") + "-" + "<br/>"+
                                    $(this).text()+"<br>"
                                  );
            });
        },
        error: function(){ 
            alert("Mensagem de erro.");
        }

    });
});
jquery html xml

  • Can you give an example of the XML you are receiving? what does console.log(typeof xml, xml); within that success?

  • Your code is confused, you’re doing append in table without creating a line (tr). It should be something like this: $("#tabela").append("<tr><td>" + $(this).text() + "</td></tr>");

  • @Ricardopunctual I wanted the html page to look more or less like the w3schools http://www.w3schools.com/xml/xml_usedfor.asp. I edited the code more or less like you said: $("#table"). append("<tr><td>" + $(this).attr("id") + "<br/>"+ $(this). text()+"</td></tr>"); but the html looks like this: http://i.imgur.com/Sra44lg.png

1 answer

0


Xml example:

XML

Code example: 

$.ajax({
                url: "ListaMonografias.jsp",
                success: function (xml) {
                    var saida = "";
                    $(xml).find("monografia").each(function () {
                        saida += "<tr>";
                        saida += "<td>" + $(this).find("ano").text() + "</td>";
                        saida += "<td>" + $(this).find("titulo").text() + "</td>";
                        saida += "<td>" + $(this).find("nomeAutor").text() + "</td>";
                        saida += "<td>" + $(this).find("nomeOrientador").text() + "</td>";
                        saida += "<td>" + $(this).find("areaConcentracao").text() + "</td>";
                        saida += "<td>" + $(this).find("local").text() + "</td>";
                        saida += "<td><a href=deletar.jsp?id=" + $(this).find("id").text() + ">Apagar</a><a href=cadastro.jsp?id=" + $(this).find("id").text() + ">&nbsp Editar</a> </td>";
                        saida += "</tr>"
                    });
                    $("#tbody").append(saida);
                    $("#tabela").dataTable();
                },
                error: function () {
                    alert("Processo não concluído");
                }
            });


    <table class="table table-borded table-responsive" id="tabela">
                <thead>
                    <tr>
                        <th>Ano</th>
                        <th>Titulo</th>
                        <th>Autor</th>
                        <th>Orientador</th>
                        <th>Area de concentração</th>
                        <th>Local</th>   
                        <th>Ações</th>    
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
    </table>

  • Thank you very much, it worked exactly as I wanted it!

Browser other questions tagged jquery html xml

You are not signed in. Login or sign up in order to post.