如何使用jquery將xml數據拖入html表中？

我正在致力於ASP.NET項目。在那裏，我想拉一個xml數據到html表使用jQuery？這裏是文件，如何使用jquery將xml數據拖入html表中？

employee.xml，

<?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>

script_tbemployeedetails.js，

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

<%@ 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>

這是我的代碼。我無法將 xml數據拖入 html表中。我怎樣才能做到這一點？

請幫我...

來源

2017-06-29 lashja

你沒有使用正確的選擇器'$（tb_employee）'應該是'$（'＃tb_employee'）' –

你的問題就在這裏：

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

來源

2017-06-29 16:18:04 gaetanoM

如何使用jquery將xml數據拖入html表中？

回答

相關問題