htmlでExcelのような検索機能をつけて・・・

JavaScript 教えてgoo

Fujillin さんを混乱させるには！？
iframe を使って、他のファイルからも読み込んでみるも、読み込みを完了してから、その要素を返すのが面倒で、アラートさせているうちに、ごまかす。

<!DOCTYPE html>
<title></title>

<style>
table, td, th {
  border :1px #080 inset;
}
</style>

<table id="table1">
<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>
<h3>*******  テスト用  *******</h3>
<form action="#">
<P>
  名前：
  <input type="text" name="name" vlue="">
  <input type="button" value="検索" onclick="test(this.form)">
<p>
<p>
  結果：
  <textarea name="result" value="" style="width:24em;" rows="5" readonly>
  </textarea>
 </p>
</form>


<script type="application/javascript; version=1.8">

const createLookUp =
  (function (getCellsText)
    (function (table, colNo)
      let (data = Array.prototype.reduce.call(
        table.querySelectorAll ('tr td:nth-of-type('+ colNo + ')'),
          (function (a, td)
            (a.text.push (td.textContent),
             a.rows.push (td.parentNode),
             a)), { text: [], rows: [] }))

      (function (str, idx)
        let (row = data.text.indexOf (str, idx))
          (0 <= row)
          ? getCellsText (data.rows[row])
          : [])))

  (function (tr)
    Array.prototype.reduce.call (tr.childNodes,
      (function (a, n)
        (n.nodeType === 1)
        ? a.concat (n.textContent)
        : a), []))


const getTableFromURL = function (src, id) {
  var fr = document.createElement ('iframe');
  fr.src = src;
  fr.style.display ="none";
  document.body.appendChild (fr);
  alert("読み込みが終了しました");
  return fr.contentWindow.document.getElementById (id);
};

//var lookup = createLookUp (document.querySelector('#table1'), 1); // 0列目ではない！
var lookup = createLookUp (getTableFromURL ('0028.html', 'table1'), 1); // 0列目ではない！


function test (f) {
  var name = f.elements["name"].value;
  var i, r, m = [], data = ["名","英","国","数"];

  var cells = lookup (name);
  
  for (i = 0; i < 4; i++) {
    m.push (['[', data[i], ']:', cells[i]].join (''))
  }
  f.elements["result"].value = m.join('\n');
}

</script>