※ ChatGPTを利用し、要約された質問です（原文：htmlでExcelのような検索機能をつけて・・・）
htmlでExcelのような検索機能をつけてデータを表示する方法
このQ&Aのポイント
htmlでExcelのような検索機能を実装し、別のHTMLからデータを引っ張る方法を調査中です。
また、結果の表示を1つずつ改行して表示する方法も調査中です。
質問内容について、詳細をお教えいただけると助かります。
htmlでExcelのような検索機能をつけて・・・
・・・作成しています。
下記のようなタグで打っています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
var VlookUp = (function(){
function getText(node){
var t = node?(node.textContent || node.innerText):node;
return t?t.replace(/^ +| +$|\r|\n/g,""):t;
}
function check(search, node){
return getText(node)==search;
}
function setTable(node){
if(typeof node=="string"){
node = document.getElementById(node);
if(node && node.nodeName=="TABLE")
this.node = node; else node = null;
} else {
node = this.node;
}
return node;
}
var vlookup = function(){
var a = arguments, node,
search = a[0], index = a[2],
result = {length:0, values:[], status:"complete"};
if(index===undefined)
index = a[1]; else node = a[1];
node = vlookup.setTable(node);
if(!node || isNaN(index)){
result.status = "illegal arguments";
} else {
for(var i=0, r; r=node.rows[i++];)
if(check(search, r.cells[0]))
result.values.push(getText(r.cells[index]));
if(!(result.length=result.values.length))
result.status = "not found";
}
result.value = result.values[0];
return result;
}
vlookup.setTable = setTable;
return vlookup;
})();
// ********** テスト用 ************
function test(f){
var name = f.elements["name"].value;
var i, r, m, data = ["名","英","国","数"];
VlookUp.setTable("table1");
m = "" + name;
for(i=1; i<4; i++){
r = VlookUp(name, i)
m += ", [" + data[i] + ":" + (r.length?r.values.join(","):r.status) + "]";
}
f.elements["result"].value = m;
}
//-->
</script>
</head>
<body>
<table id="table1" border="1">
<tr><th>名前</th><th>英語</th><th>国語</th><th>算数</th></tr>
<tr><td>田中</td><td>80</td><td>80</td><td>80</td></tr>
<tr><td>鈴木</td><td>90</td><td>50</td><td>70</td></tr>
<tr><td>山田</td><td>60</td><td>95</td><td>90</td></tr>
<tr><td>小林</td><td>70</td><td>90</td><td>75</td></tr>
<tr><td>鈴木</td><td>40</td><td>30</td><td>40</td></tr>
</table>
<hr>
<div>
******* テスト用 *******
<form action="#">
名前：<input type="text" name="name" vlue="">
<button type="button" onclick="test(this.form)">検索</button><br>
結果：<input type="text" name="result" value="" style="width:24em;" readonly>
</form>
</div>
</body>
</html>
上記のタグは、同じページ内での検索機能なのですが、別のhtmlからデータを引っ張ることは可能でしょうか？
また、上記のタグですと、結果のところで「田中, [英:80], [国:80], [数:80]」と表示されるのですが、1つ、1つ、改行させた状態で表示することは可能でしょうか？
あわせての質問で、大変恐縮ですが、お教えいただけると幸いです。
宜しくお願い致します。
お礼
返事が遅くなり、すいませんでした。 とても参考となりました。 ありがとうございます。 また、機会がありましたら宜しくお願いします。