6
私のコースでは、ユーザーが連絡先のファーストネームを入力できるようにするHTMLページを作成するように求められています。ユーザが入力したファーストネームと一致するまで連絡先をループし、メールアドレス以外の連絡先情報を同じページに表題の表と<h1>の表に表示します。連絡先の詳細は次のとおりです。一致するものがない場合は、連絡先が存在しないことを示す<h2>があるはずです。JavaScriptでXMLを検索してテーブルに結果を表示
次は私のXMLファイルです：
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="Contact.xsl" ?>
<!DOCTYPE contact SYSTEM "contact.dtd">
<contact>
<person>
<name>
<firstname>Bob</firstname>
<lastname>Jones</lastname>
</name>
<phone>(02)44 42 45 63</phone>
<address>
<street>34 Highway Road</street>
<city>Grovedale</city>
<state>NSW</state>
<postcode>3228</postcode>
<email>[email protected]</email>
</address>
</person>
<person>
<name>
<firstname>Gary</firstname>
<lastname>Williams</lastname>
</name>
<phone>(02)44 41 87 56</phone>
<address>
<street>223 Yarra Avenue</street>
<city>Branston</city>
<state>NSW</state>
<postcode>2317</postcode>
<email>[email protected]</email>
</address>
</person>
私はいくつかのことを試してみましたが、私は、データがテーブルに表示するために得るだろうか見当がつかない。以下は私のXSLファイルで、テーブルを表示したいと思う方法ですが、検索の結果は表示されます。
<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="Contact.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
div {
margin-left: 150px;
margin-right: 20px;
margin-top: 50px;
width: 80%;
}
h1 {
font-size: 24px;
color: #F00;
}
.headings {
background-color: #06F;
}
.data {
background-color: #6F9;
}
.table {
border: 2px solid #F00;
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>CONTACTS</h1>
<table class="table">
<tr class="headings">
<th>First Name</th>
<th>Last Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Postcode</th>
<th>Email</th>
</tr>
<xsl:for-each select="contact/person">
<tr class="data">
<td><xsl:value-of select="name/firstname"/></td>
<td><xsl:value-of select="name/lastname"/></td>
<td><xsl:value-of select="address/street"/></td>
<td><xsl:value-of select="address/city"/></td>
<td><xsl:value-of select="address/state"/></td>
<td><xsl:value-of select="address/postcode"/></td>
<td><xsl:value-of select="address/email"/></td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
JavaScriptを使用してXMLファイルを検索し、検索結果を表示する表を作成する必要があります。
次のように私が持っているHTMLは次のとおりです。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Task 2</title>
<script language="JavaScript" type="text/javascript">
window.onload = loadIndex;
function loadIndex()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("Contact.xml");
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("Contact.xml");
}
}
function searchIndex()
{
if (!xmlDoc)
{
loadIndex();
}
var searchterm = document.getElementById("searchme").value;
var allitems = xmlDoc.getElementsByTagName("firstname");
results = new Array;
for (var i=0;i<allitems.length;i++)
{
var name = allitems[i].lastChild.nodeValue;
var exp = new RegExp(searchterm,"i");
if (name.match(exp) != null)
{
results.push(allitems[i]);
}
}
showResults(results, searchterm);
}
function showResults(results, searchterm)
{
//insert table data here to be displayed
}
</script>
</head>
<body>
First Name: <input type="text" name="firstname" id="searchme">
<br />
<input type="submit" value="Search" onClick="searchIndex(); return false;">
</body>
</html>
あなたが見ることができるように、私はどこから始めれば見当がつかない。私はXMLファイルをロードし、ファーストネームタグを収集し、次に何とか2つを比較して結果を表示することを知っています。
私は以下を見てきました。これは私の後ろに似ていますが、結果を表に表示することはできません。 http://www.dzone.com/snippets/simple-javascriptxml-based
ありがとうございました。
ここで、関数searchIndexはですか？ –
今はどこもありません。私が言ったように。どこから始めたらいいのか分かりません。私が思う以上に上記を編集してください。 – Curley5959
コードを更新しました。 – Curley5959