0

Eu gostaria que os dados do XML fossem exibidos em uma tabela comum HTML com TR e TD, pois com o código que estou usando as informações ficam confusas.

Segue o código que usei:

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

    });
});
3
  • Podes dar um exemplo do XML que estás a receber? o que dá console.log(typeof xml, xml); dentro desse success?
    – Sergio
    7/11/2016 às 8:15
  • Seu código está confuso, estás fazendo append na table sem criar uma linha (tr). Deveria ser algo parecido com isso: $("#tabela").append("<tr><td>" + $(this).text() + "</td></tr>"); 7/11/2016 às 12:13
  • @RicardoPontual Queria que na pagina html ficasse mais ou menos como no exemplo do w3schools w3schools.com/xml/xml_usedfor.asp. Editei o código mais ou menos como você disse: $("#tabela").append("<tr><td>" + $(this).attr("id") + "<br/>"+ $(this).text()+"</td></tr>"); mas o html fica assim fica assim i.imgur.com/SRa44LG.png 8/11/2016 às 2:11

1 Resposta 1

0

Exemplo xml:

XML

Exemplo codigo:

$.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>
1
  • Muito obrigado, funcionou exatamente como eu queria! 8/11/2016 às 2:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .