思いつきのままなので、#1様のように簡潔でもないし整理されてもいませんけれど、一例としてのサンプルまでに。
引数はexcelに似せて VlookUp( search, [ table(id/node),] index) としていますが、同じ表に対して連続して参照する場合を考えて tableは省略可にしています。(tableはidまたは直接にnodeで指定)
検索方法は以下のサンプルでは完全一致のみに限定していますが、一致判定用関数check(search, node)の内容を変えれば、部分一致や前方一致あるいは範囲検索など自由に対応可能になるかと。(現状は単に search==node.textContent を返しているだけです)
複数ヒットも可能にしているので戻り値はオブジェクトにし、lengthがヒット数(エラーの場合は0)、valuesは結果の値(配列)、valueはその最初の値(=values[0])、statusが結果の状態といった感じ。
「** テスト用 **」の部分は、動作テスト用です。
(解答欄の都合上インデントを全角空白に変えています)
<!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>
お礼
ありがとうございます。 参考にしてみます。 また、不明な点があった場合にはお世話になると思います。 そのときには、よろしくお願いします。