How to display XML data in an HTML table

Question

How to display XML data in an HTML table

Navigation

#1 by (0 votes)

0

I'd 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 is confusing.

Here is 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.");
        }

    });
});

html jquery xml

asked by anonymous 07.11.2016 / 01:43

1 answer

Picking items from an array converting to UTF8 Error printing data in edittext

score 0 · Accepted Answer

Example xml:

Samplecode:

$.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>