Question

我正在研究ASP.NET项目。在那里，我想使用jquery将xml数据提取到html表中？这是文件，

employee.xml，

＆＃13;

<?xml version="1.0" encoding="utf-8" ?>
    <employeedetails>
    <Employee>
    <Name>"Indhu"</Name>
    <ID>"571367"</ID>
    <Designation>"Programmer Analyst"</Designation>
    </Employee>
    <Employee>
    <Name>"Swetha"</Name>
    <ID>"568877"</ID>
    <Designation>"Analyst"</Designation>
    </Employee>
    <Employee>
    <Name>"Vibisha"</Name>
    <ID>"568879"</ID>
    <Designation>"Senior Analyst"</Designation>
    </Employee>
    </employeedetails>

＆＃13;

script_tbemployeedetails.js，

＆＃13;

$(document).ready(function(){
$.ajax({
type:'GET',
url:'employee.xml',
dataType:'xml',
success:function(xmlData){
$("Employee",xmlData).each(function(){
String name=$(this).find("Name").text(),
String id=$(this).find("ID").text(),
String designation=$(this).find("Designation").text();
$(tb_employee).append('<tr>');
$(tb_employee).append('<td>'+name+'</td>');
$(tb_employee).append('<td>'+id+'</td>');
$(tb_employee).append('<td>'+designation+'</td>');
$(tb_employee).append('<tr>');
});
)}
});
}

＆＃13;

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmployeeDetails_XML._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Extract and Read XML Data Using jQuery and Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb_employee">
<tr>
<th>NAME</th>
<th>ID</th>
<th>DESIGNATION</th>
</tr>
</table>
</div>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/employee.xml">
</asp:XmlDataSource>
</form>
</body>
</html>

＆＃13;

＆＃13; 这是我的代码。我无法将xml数据提取到html表中。我怎么能这样做？

请帮帮我......

Answer 1

您的问题在这里：

$(tb_employee).append('<tr>');
$(tb_employee).append('<td>'+name+'</td>');
$(tb_employee).append('<td>'+id+'</td>');
$(tb_employee).append('<td>'+designation+'</td>');
$(tb_employee).append('<tr>');

创建和追加新行的方法是：

$(tb_employee).append(
     $('<tr/>').append($('<td/>', {text: name}))
        .append($('<td/>', {text: id}))
        .append($('<td/>', {text: designation}))
);

var xmlStr ='<?xml version="1.0" encoding="utf-8" ?>\
          <employeedetails>\
          <Employee>\
          <Name>"Indhu"</Name>\
          <ID>"571367"</ID>\
          <Designation>"Programmer Analyst"</Designation>\
          </Employee>\
          <Employee>\
          <Name>"Swetha"</Name>\
          <ID>"568877"</ID>\
          <Designation>"Analyst"</Designation>\
          </Employee>\
          <Employee>\
          <Name>"Vibisha"</Name>\
          <ID>"568879"</ID>\
          <Designation>"Senior Analyst"</Designation>\
          </Employee>\
          </employeedetails>';
  var xmlData = $.parseXML(xmlStr);
  /*
  $.ajax({
      type: 'GET',
      url: '1.xml',
      dataType: 'xml',
      success: function (xmlData) {
      *****/
          $("Employee", xmlData).each(function () {
              var name = $(this).find("Name").text();
              var id = $(this).find("ID").text();
              var designation = $(this).find("Designation").text();
              $(tb_employee).append(
                      $('<tr/>').append($('<td/>', {text: name}))
                              .append($('<td/>', {text: id}))
                              .append($('<td/>', {text: designation}))
              );
          });
      //}
  //});

table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="tb_employee">
    <tr>
        <th>NAME</th>
        <th>ID</th>
        <th>DESIGNATION</th>
    </tr>
</table>

如何使用jquery将xml数据拉入html表？

1 个答案: