htmlでExcelのような検索機能をつけてデータを表示する方法
- 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つ、改行させた状態で表示することは可能でしょうか？ あわせての質問で、大変恐縮ですが、お教えいただけると幸いです。 宜しくお願い致します。
- blue-rapis
- お礼率42% (8/19)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どこかでみたような… と思ったら、私の回答だった。 http://okwave.jp/qa/q6750899.html のご質問では、VLOOKUP関数のようなものをというご質問でしたので、似たような関数を作ってみただけで、その使い方や出力などはご自由にどうぞという意味だったのですが… （使い方も（↑）に書いたつもりでしたが、もっと簡略化したもののほうがよかったのかなぁ…） ＞1つ、1つ、改行させた状態で表示することは可能でしょうか？ そのサンプルの場合だと出力先がinput要素なので、そのままでは改行ができないのではないでしょうか？ textareaやdiv要素などに出力することにすれば、当然可能になります。 改行を入れたいところに"\n"(：textareaやalertの場合）、あるいは"<br>"（又は"\u003Cbr\u003E"：div要素などの場合）の文字列を入れてあげればブラウザが改行として扱ってくれます。 ＞別のhtmlからデータを引っ張ることは可能でしょうか？ 不可能ではありませんが、検索とはまったく異なる機能が必要になります。 方法としては「ajax」と言われるものになるでしょうから、そのあたりをキーにぐぐってみてください。
関連するQ&A
- 罫表のセル結合
AJAXの勉強をしています。 Htmlに表示されている罫表の選んだセルをセル結合するような処理を 作りたいのですが、可能でしょうか。 DOMを使用してセルの削除等は出来たのですが、セル結合を行う事が出来ないのです。 function joinSpan( ) { // 出力先のトップ要素となるtable要素 var table = document.getElementById("result"); //とりあえずセル削除してみる。 var child = table.childNodes; var child2 = child[0].childNodes; child[0].removeChild(child2[1]); } ↓対象となるテーブル <table id="result"> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody > <tr><td>あ</td><td>う</td><td>え</td><td>お</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> 何か良い方法がありましたら、教えて頂ければと思います。
- ベストアンサー
- JavaScript
- innerHTMLでのテーブル作成
いつもお世話になっております。 こちらの質問と回答を参考にプログラムを付け足して、リストを作る練習をしています。 http://okwave.jp/qa/q8090793.html テーブル行の先頭に項目名を表示させて、表を分かりやすくしようと思ったのですが、 最後に出力される項目名がそれまでの項目名を上書きしてしまい、 項目名が1個しか表示されないため、テーブルがずれて表示されてしまいます。 50個 金額～～ 100個 金額～～ と表示させるためには、どこを手直ししたら良いのか知恵を貸してください。 よろしくお願いします。 <!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>innnerHTMLで自動生成された表を出力したい</title> <style> h2 { margin-bottom:0; color:#900;} table{ border:none; font-size:12px;} table tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} </style> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate; var nouki = document.getElementsByName('nouki'); var price = new Array ( 10, 30, 50 ); function getRate() { for ( var i = 0; i < nouki.length; i ++ ) { if ( nouki[i].checked ) { daysRate = nouki[i].value; }}return parseFloat(daysRate);} function calc() { // 選択されているレートを取得 var rate = getRate(); var list_name = new Array('<h2>表1</h2>','<h2>表2</h2>','<h2>表3</h2'); var table_start = "<div><table><tbody>"; var table_head = '<tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>'; var table_kosuu = ""; var table_td = ""; var table_end = "</tbody></table></div><hr />"; // priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御 for(var i=50; i<=100; i+=50){ if(i==50){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } if(i==100){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } document.getElementById('priceTableOutput').innerHTML = list_name[0] + table_start + table_head + table_kosuu + table_td; + table_end; } } window.onload = function() { // 読込み後も一度テーブル表示を実行する calc(); } </script> </head> <body> 再計算ボタンを押すと価格表が再計算されます。<br /> <input type="radio" name="nouki" value="1" checked="checked" />通常配達 <input type="radio" name="nouki" value="1.25" />翌日配達 <input type="radio" name="nouki" value="1.5" />当日配達 <input type="button" value="再計算" onClick="calc()"> <div id="priceTableOutput">innerHTMLで、ここに表を出力</div> <br /> </body> </html>
- ベストアンサー
- JavaScript
- 検索結果について
<script type="text/javascript"> function show(out){ var body = ""; var recs = out.split("<r>"); for(var i = 0; i <recs.length - 1; i++){ body += "<table width='100' border='3'><th>あああ</th><th>いいい</th>"; body += "<tr>"; var flds = recs[i].split("<i>"); for(var j = 0; j <flds.length - 1; j++){ if(j != 5){ body += "<td>" + flds[j] + "</td>"; }else{ if(flds[1]!=""){ } } } } $("#show").html(body); } </script> html、php、MySQLで検索システムの作成を行っているのですが、検索して表示される結果が あああ いいい DBのあああの検索結果1 DBのいいいの検索結果1 あああ いいい DBのあああの検索結果2 DBのいいいの検索結果2 となってしまうのですが、<th>のあああ、いいいを一つだけにして あああ いいい DBのあああの検索結果1 DBのいいいの検索結果1 DBのあああの検索結果2 DBのいいいの検索結果2 とするにはどうすればいいでしょうか。 上のjavascriptがどのようになっているのかよく分かっていない状態です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。
- 締切済み
- JavaScript
- テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。初心者なのでまだまだわからないことがたくさんありますがよろしくお願いします。
- 締切済み
- JavaScript
- 検索機能
mysqlで検索フォームを作成しています 入力してデータに該当したら検索結果が出るのですが 該当者がいないときはテーブルの表のみ出力してしまう 該当者なしと入力フォーム側に表示したいです また ''''''を入力するとSQLになるのですが mysql_real_escapeを使えば出なくなります どうしたらいいですか <html> <body> <?php //データベースに接続 if (!$con = mysql_connect("localhost", "root", "admin")) { echo "接続エラー" ; exit ; } //データベースを選択 if (!mysql_select_db("db_test", $con)) { echo "データベース選択エラー" ; exit ; } //フォームで送られてきた条件を元にSELECT文を作成 $sql = "select * from tbl_test where (氏名 LIKE '%{$_GET['name']}%') or (住所 LIKE '%{$_GET['name']}%')"; //SELECT文を実行 if (!$res = mysql_query($sql)) { echo "SQLエラー<BR>" ; exit ; }else{ } //検索結果表示 echo "<table border=1>" ; echo "<tr> <th>番号</th> <th>氏名</th> <th>住所</th> <th>操作</th> </tr>" ; while($row = mysql_fetch_array($res)) { $ID = htmlspecialchars($row['番号']); $NAME = htmlspecialchars($row['氏名']); $ADDR = htmlspecialchars($row['住所']); echo "<tr> <td>$ID</td> <td>$NAME</td> <td>$ADDR</td> <td><a href='edit.php?番号=$ID'>修正</a> <a href='delete.php?番号=$ID'>削除</a></td></tr>"; if ($_GET) { // データがGETされていたら $event = isset($_GET['event']) ? $_GET['event'] : ''; // 取得 } } echo "</table>" ; //結果セットの開放 mysql_free_result ($res) ; //データベースから切断 mysql_close($con) ; ?> </body> </html>
- ベストアンサー
- MySQL
- 動的なcheckboxのcheckedについて
動的にcgiから名簿tableを作り先頭にcheckboxを配置しています。 （□、コード、氏名） そのコードNo.取得し内容によってループ内でcheckboxをif文でオンオフしたいのですがコードNo.（rec[0]）の取得方法がわかりません。できるはずとは思うのですが私の力不足で・・・。よろしくお願いします。 var recs = xhrObj.responseText.split("<r>"); var status2 = "<table id='meibo' ><tbody><tr>" +"<th width='20'><th width='40'>No.</th><th width='120'>氏名</th>" +"</tr>"; for(var i = 1; i < recs.length - 1; i++){ rec = recs[i].split("<i>"); status2 += "<tr><td><input type='checkbox' name='checkbox' id='"+i+"' /></td>"; status2 += "<td id='"+i+"' />"+rec[0]+"</td><td id='"+i+"' />"+rec[1]+"</td>"; status2 += "</tr>"; } status2 += "</tbody></table>"; document.getElementById("status2").innerHTML = status2; var observer = document.getElementById("meibo"); setListener(observer, "click", check);
- 締切済み
- JavaScript
- POSTすると配列の数がおかしくなる
matとquaとhowtoをそれぞれ4つPOSTしているのですが、POSTされたデータを受け取るとmat4つ、qua5つ、howto5つと数がおかしくなります。 なぜかわかりません。とくにインクリメントしていないのに増えます。 教えて下さい。 <script type="text/javascript"> function myAdd(obj){ var max=15; var c=count("mat"); if(c>=max) return false; var oTR=document.createElement("tr"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); if(c>=max-1) obj.disabled=true; } function count(name){ var tags=document.getElementsByTagName("input"); var ta=document.getElementsByTagName("textarea"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); if(tags){ for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } } if(ta){ for(var i=0;i<ta.length;i++){ if(ta[i].name.match(reg)){ c++; } } } return c; } function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } </script> </head> <body> <form method="post" enctype="multipart/form-data" action="check.php"> <textarea name="explain"></textarea> <table id="t0" border> <tbody> <tr> <td><input type="text" name="mat1" /></td> <td><input type="text" name="qua1" /></td> </tr> <tr> <td><input type="text" name="mat2" /></td> <td><input type="text" name="qua2" /></td> </tr> <tr> <td><input type="text" name="mat3" /></td> <td><input type="text" name="qua3" /></td> </tr> <tr> <td><input type="text" name="mat4" /></td> <td><input type="text" name="qua4" /></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd(this)"> <br /> <span id="area"> <textarea name="howto1"></textarea> <textarea name="howto2"></textarea> <textarea name="howto3"></textarea> <textarea name="howto4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd(this)"> <input type="submit" value="送る"> </form>
- ベストアンサー
- JavaScript
- テーブルを順番通りに直すやつを外部で読み込みたい。
テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。 //本文 <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <th>カンマ</th> </tr> <tr><td>1</td><td>かきくけこ</td><td>1</td><td>1,000</td></tr> <tr><td>2</td><td>さしすせそ</td><td>10</td><td>10,000</td></tr> <tr><td>3</td><td>あいうえお</td><td>100</td><td>2,000</td></tr> <tr><td>4</td><td>カキクケコ</td><td>2001</td><td>3,000</td></tr> <tr><td>5</td><td>アイウエオ</td><td>2002</td><td>20,000</td></tr> <tr><td>6</td><td>サシスセソ</td><td>2003</td><td>11,000</td></tr> <tr><td>7</td><td>一丁目</td><td>1.234</td><td>12,000</td></tr> <tr><td>8</td><td>二丁目</td><td>12.34</td><td>30,000</td></tr> <tr><td>9</td><td>三丁目</td><td>123.4</td><td>31,000</td></tr> <tr><td>10</td><td>１丁目</td><td>0.001</td><td>32,000</td></tr> <tr><td>11</td><td>２丁目</td><td>0.002</td><td>400,000</td></tr> <tr><td>12</td><td>３丁目</td><td>0.003</td><td>50</td></tr> </table> <style> #sort_table { border-collapse:collapse; } #sort_table td { border:1px solid lightgray; } #sort_table th { cursor:pointer; background-color:lightgray; } </style> //javascript <script> window.addEventListener('load', function () { let column_no = 0; //今回クリックされた列番号 let column_no_prev = 0; //前回クリックされた列番号 document.querySelectorAll('#sort_table th').forEach(elm => { elm.onclick = function () { column_no = this.cellIndex; //クリックされた列番号 let table = this.parentNode.parentNode.parentNode; let sortType = 0; //0:数値 1:文字 let sortArray = new Array; //クリックした列のデータを全て格納する配列 for (let r = 1; r < table.rows.length; r++) { //行番号と値を配列に格納 let column = new Object; column.row = table.rows[r]; column.value = table.rows[r].cells[column_no].textContent; sortArray.push(column); //数値判定 if (isNaN(Number(column.value))) { sortType = 1; //値が数値変換できなかった場合は文字列ソート } } if (sortType == 0) { //数値ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareNumberDesc); } else { sortArray.sort(compareNumber); } } else { //文字列ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareStringDesc); } else { sortArray.sort(compareString); } } //ソート後のTRオブジェクトを順番にtbodyへ追加（移動） let tbody = this.parentNode.parentNode; for (let i = 0; i < sortArray.length; i++) { tbody.appendChild(sortArray[i].row); } //昇順／降順ソート切り替えのために列番号を保存 if (column_no_prev == column_no) { column_no_prev = -1; //降順ソート } else { column_no_prev = column_no; } }; }); }); //数値ソート（昇順） function compareNumber(a, b) { return a.value - b.value; } //数値ソート（降順） function compareNumberDesc(a, b) { return b.value - a.value; } //文字列ソート（昇順） function compareString(a, b) { if (a.value < b.value) { return -1; } else { return 1; } return 0; } //文字列ソート（降順） function compareStringDesc(a, b) { if (a.value > b.value) { return -1; } else { return 1; } return 0; } </script> let、var、constはfunctionの中で使うと、ローカル変数となってしまいます。 グローバル変数にするにはどのようにしたらよいのでしょうか。 しかし、let table、let tbodyに対応する関数がございません。 もう八方塞がりです。 jsの部分のみご記述ください。
- 締切済み
- JavaScript
- JS テーブルデータ：シャッフル関数の修正
JavaScript テーブルデータ：シャッフル関数の不具合を修正するには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。 どこをどのように修正したらよいのでしょうか？ 今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない （すべてのＴＤ内のシャッフルをしたい） ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>
- ベストアンサー
- JavaScript
お礼
返事が遅くなり、すいませんでした。 とても参考となりました。 ありがとうございます。 また、機会がありましたら宜しくお願いします。