
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
思いつきのままなので、#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>
ありがとうございます。
参考にしてみます。
また、不明な点があった場合にはお世話になると思います。
そのときには、よろしくお願いします。
No.1
- 回答日時:
あれ、かいとうがつかないね。
さいきんの Firefox にして、
ぜんかくくうはくは、はんかにしてからうごかしてね
ぜんぶの table が、たいしょうかよ!とか
まいかい、tdをひろってくるのかよ!とか
th とかあったらだめじゃん!とか
えらーちぇっくもないかよ!とか、つっこみがっ!
ie ように、だれかがかくまでの、おあそび。
<p>
<input type="text" onchange="hoge(this.value, 1, '#rst')">
<input type="text" id="rst" value="">
</p>
<script type="application/javascript; version=1.8">
const hoge =
function (str, no, target)
document.querySelector (target).value =
Array.reduce (document.querySelectorAll ('tr > td:nth-of-type(1)'),
(function (r, t)
let (tx = t.textContent.trim ())
(tx == str)
? t.parentNode.cells[no].textContent.trim ()
: r), '');
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelにの以下の設定方法について教えてください! C列にデータ入力の設定をしています。(出、入を 3 2022/06/22 01:33
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- Excel(エクセル) 【再度】Excelの関数について教えてください。 4 2023/07/28 13:06
- Excel(エクセル) Excelの関数について教えてください。 5 2023/07/28 11:27
- Visual Basic(VBA) 入力と同時に桁数を詰める 3 2022/09/11 20:23
- その他(Microsoft Office) エクセルについて教えてください。 2 2022/10/20 14:55
- Excel(エクセル) エクセル 指定セル繰り返しマクロ 4 2022/06/06 17:08
- Excel(エクセル) EXCELでリターンキーが押されたらそのセルに特定の文字を表示したいのですが。 2 2022/08/07 12:58
- Excel(エクセル) 【Excel関数】値が合致するセルの隣のセルを表示させたい 8 2022/10/12 17:44
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQuery.eachの使い方について教...
-
テーブル行のクリックでチェッ...
-
JavaScriptから自ページリンク...
-
CSSのテーブルで色分けをする場合
-
マウスをブラウザの外に出した...
-
エラーで悩んでます。。
-
td:nth-childを使ってa要素を取...
-
【UWSC】HTML内のある部分を抽...
-
添付画像のようなhtmlとcssのス...
-
HTMLのフォーム名とJavaScript...
-
追加ボタンを押した際に ok ボ...
-
onclickをEnterキーでも行いたい
-
プルダウンメニューの項目で1つ...
-
同じページでgetElementsを複...
-
イメージマップで画像変え
-
数値の比較で正しく評価されな...
-
CGI.pmでラジオボタンを思い通...
-
return trueとreturn falseの用...
-
Locationについて
-
イベント発生時に入力待ち状態...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
クリックされた罫表セルの行番...
-
tableの任意行にfocusをあてる
-
javascript クリックすると、あ...
-
チェックボックスにチェックが...
-
マウスをブラウザの外に出した...
-
ブルダウン選択でページの表示...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
動的なtableの値を取得したい
-
ツールチップにテーブル左端列...
-
【UWSC】HTML内のある部分を抽...
-
別ページからOnclickでテーブル...
-
【JQuery】テーブルで行選択さ...
-
JSで、テーブルのある行のみ、...
おすすめ情報