- ベストアンサー
既存のJSコードをHTMLサンプルに組み込む方法
- JSコードをHTMLサンプルに組み込む方法をご教示ください。
- 簡体字と日本語漢字の相互変換ツール Kanconvit を使い、テキストフォームの入力を中国語漢字に変換する方法を教えてください。
- HTMLサンプルにJSコードを組み込んで、テキストフォームの入力に対して中国語漢字に変換する機能を実装したいです。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃2です。 説明をしていると長くなりますが、要素を特定する方法をどのように考えるかということで、単純化できればそれだけ処理を簡単にできると言う意味です。 想像するところ、ソースはサーバー側のソフトから自動出力されるもののようなので、ソースの間違いまでは考慮しなくても良さそうではありますが… HTMLを変更しても良いのか不明ですが、例えば以下のサンプルのようにすれば、対になるinputが必ず連続するようになるかと思います。 #2の例では変換対象の識別に「type、class名」を、対の識別に「type、name、class名」で確認していましたが、簡略化して、変換対象はclass="jp"のものとし、対のものはその直後のinput（かつclass="cn"）と限定しています。 ついでに、入れ子のtableもはずしてあります。 （ダミーのKanconvitが入っていますので、削除してください。） 文字数制限の都合上分割されちゃいます。 （例示のセットも2個。スクリプトに必要のない属性も省略しました。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> table#nameList { border-collapse: separate; border-spacing:2px; border:1px solid #ccc; border-bottom-color:#444; border-right-color:#444; } table#nameList td { border:1px solid #ccc; border-top-color:#444; border-left-color:#444; } table#nameList td div { margin-left:2px; float:left; } table#nameList input { width:18em; } table#nameList td.L4 input { width:4em; } table#nameList input.jp { background-color: #cfc; } table#nameList input.cn { background-color: #ffc; } </style> </head> <body> <table id="nameList"> <tr> <td rowspan="3" class="L4"> <div><input value="高橋" class="jp"><br><input value="" class="cn"></div> <div><input value="一郎" class="jp"><br><input value="" class="cn"></div> </td> <td>肩書1</td> <td><input value="社名1" class="jp"><br><input value="" class="cn"></td> <td><input value="役職1" class="jp"><br><input value="" class="cn"></td> <td rowspan="3"> <button type="button">中国語<br>←漢字変換</button> </td> </tr> <tr> <td>肩書2</td> <td><input value="社名2" class="jp"><br><input value="" class="cn"></td> <td><input value="役職2" class="jp"><br><input value="" class="cn"></td> </tr> <tr> <td>肩書3</td> <td><input value="社名3" class="jp"><br><input value="" class="cn"></td> <td><input value="役職3" class="jp"><br><input value="" class="cn"></td> </tr>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
＜つづき＞ <tr> <td rowspan="3" class="L4"> <div><input value="鈴木" class="jp"><br><input value="" class="cn"></div> <div><input value="二郎" class="jp"><br><input value="" class="cn"></div> </td> <td>肩書1</td> <td><input value="社名1" class="jp"><br><input value="" class="cn"></td> <td><input value="役職1" class="jp"><br><input value="" class="cn"></td> <td rowspan="3"> <button type="button">中国語<br>←漢字変換</button> </td> </tr> <tr> <td>肩書2</td> <td><input value="社名2" class="jp"><br><input value="" class="cn"></td> <td><input value="役職2" class="jp"><br><input value="" class="cn"></td> </tr> <tr> <td>肩書3</td> <td><input value="社名3" class="jp"><br><input value="" class="cn"></td> <td><input value="役職3" class="jp"><br><input value="" class="cn"></td> </tr> <tr> </table> <script type="text/javascript"> <!-- (function() { var list = document.getElementById("nameList"); try { list.addEventListener("click", function(e){convert(e)}, false); } catch(evt) { list.attachEvent("onclick", function(e){convert(e)}); } })() var convert = (function(classTest) { return function(evt) { var e, i = 3, j, inp = []; var t = evt.target || evt.srcElement; if (t.nodeName != "BUTTON") return; while (t.nodeName != "TR") t = t.parentNode; while (i--) { e = t.getElementsByTagName("input"); for (j=0; j<e.length;) inp.push(e[j++]); t = t.nextSibling; while(t && t.nodeName != "TR") t = t.nextSibling; if (!t) break; } i = 0; while (e = inp[i++]) { if (classTest("jp")(e)) { t = inp[i++]; if (t && classTest("cn")(t)) t.value = Kanconvit.ja2zh(e.value); } } } })( function(str) { var reg = "(^|\\s)" + str + "(\\s|$)"; return function(elm) {return elm.className.match(new RegExp(reg));} }); var Kanconvit = function(){}; Kanconvit.ja2zh = function(a) { return a; } //--> </script> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
確認はしていませんが、参考のサイトによれば Kanconvit.ja2zh( 文字列 ) で、変換結果を得られるということみたいなので… <script> var convert = (function(serchPair) { return function(frm) { var e, pair, i = 0, inp = frm.elements; while (e=inp[i++]) { if ("text" == e.type && "jp" == e.className) { if (pair = serchPair(e.name, i, inp)) pair.value = Kanconvit.ja2zh(e.value); } } } })( function(org, i, inp) { var p = inp[i], pair = null; var tnam = org.substr(0, org.length-2) + "_Chinese[]"; if (p && tnam != p.name) p = inp[i+1]; if (p && "text" == p.type && "cn" == p.className && tnam == p.name) pair = p; return pair; }); </script> とでもしておいて、 ボタン部分に onclick="convert(this.form)" とか。 対になっているinputの位置関係が、例示されているもので全てなのかよくわからないのですが、2個先のinputまで見て無ければ打ち切りにしています。 （本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？）
お礼
fujillinさん、早速のご回答ありがとうございました。 元質問のサイトのサンプル＋fujillinさんご教示のスクリプト＋元質問のサンプルHTMLの組み合わせでUTF-8でHTMを保存したところ、うまく動作できました！！ものすごい感激しました。 > 対になっているinputの位置関係が、例示されているもので全てなのかよくわからないのですが、 「補足」に新たなHTMLをお示ししたように、200人分のデータがテーブル上に並んでいますが、ご提示いただいたJSは、ボタン押下→表示されている全データに瞬時に処理を施す、という仕様になっています。 こんなに一括変換できるとは十分すごいのですが、ここは、ボタン押下→「その行の人の部分だけに」中国語変換を実施、という動作をさせたいです。それから、 >2個先のinputまで見て無ければ打ち切りにしています。 > （本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？） すみません、この２点はどういうことでしょうか。 構造的には、本番環境もほぼ質問に例示したHTMLと同じ構造であり、同じINPUTタグの数ですが・・・ もしよろしければ、希望するような動作にできるようご教示いただけますと大変幸いです、 よろしくお願い致します、
元質問者です。 HTMLサンプルは下記のとおりです、よろしくお願い致します。 <html> <head> <style type="text/css"> .jp {background-color: #00ff00;} .cn {background-color: #ffff00;} </style> </head> <body> <form method="post" name="myform" action=""> <table border="1"> <th>氏名</th> <th>分類</th> <th>社名</th> <th>役職</th> <th>変換ボタン</th> <tr> <td rowspan="3"> <table border="0" cellpadding="0"> <tr> <td><input type="text" name="Sei[]" size="2" value="高橋" class="jp"></td> <td><input type="text" name="Mei[]" size="2" value="一郎" class="jp"></td> </tr> <tr> <td><input type="text" name="Sei_Chinese[]" size="2" value="" class="cn"></td> <td><input type="text" name="Mei_Chinese[]" size="2" value="" class="cn"></td> </tr> </table> </td> <td>肩書1</td> <td><input type="text" name="Kaisya1[]" size="40" value="青空運輸株式会社" class="jp"><br><input type="text" name="Kaisya1_Chinese[]" size="40" value="" class="cn"></td> <td><input type="text" name="Yakusyoku1[]" size="40" value="常務取締役" class="jp"><br><input type="text" name="Yakusyoku1_Chinese[]" size="40" value="" class="cn"></td> <td rowspan="3"> <input type="button" name="chieseinput" value="←中国語漢字に変換してみる"> </td> </tr> <tr> <td>肩書2</td> <td><input type="text" name="Kaisya2[]" size="40" value="日本輸送協会" class="jp"><br><input type="text" name="Kaisya2_Chinese[]" size="40" value="" class="cn"></td> <td><input type="text" name="Yakusyoku2[]" size="40" value="副会長" class="jp"><br><input type="text" name="Yakusyoku2_Chinese[]" size="40" value="" class="cn"></td> </tr> </tr> <tr> <td>肩書3</td> <td><input type="text" name="Kaisya3[]" size="40" value="東京トラック連合会" class="jp"><br><input type="text" name="Kaisya3_Chinese[]" size="40" value="" class="cn"></td> <td><input type="text" name="Yakusyoku3[]" size="40" value="安全部会長" class="jp"><br><input type="text" name="Yakusyoku3_Chinese[]" size="40" value="" class="cn"> <input type="hidden" name="MyNumber" value="1"> </td> </tr> </table> ： ：（以下、延々と200人分のリストが続く） ： <input type="submit" name="exec" value="保存"> </form> </body> </html>
補足
質問時は投稿文字数制限により、省略しましたが、本番環境もこのようなテーブル構造になっています。 (続きは、お礼欄に記述します) <table border="1"> <tr> <td rowspan="3"> <table> <tr> <td><input value="高橋"></td> <td><input value="一郎"></td> </tr> <tr> <td><input value=""></td> <td><input value=""></td> </tr> </table> </td> <td>肩書1</td> <td><input value="社名1"><br><input value=""></td> <td><input value="役職1"><br><input value=""></td> <td rowspan="3"> <input type="button" value="←この行にある8フォームを中国語漢字に変換"> </td> </tr> <tr> <td>肩書2</td> <td><input value="社名2"><br><input value=""></td> <td><input value="役職2"><br><input value=""></td> </tr> </tr> <tr> <td>肩書3</td> <td><input value="社名3"><br><input value=""></td> <td><input value="役職3"><br><input value=""> </td> </tr> <tr> <td rowspan="3"> <table> <tr> <td><input value="鈴木"></td> <td><input value="二郎"></td> </tr> <tr> <td><input value=""></td> <td><input value=""></td> </tr> </table> </td> <td>肩書1</td> <td><input value="社名1"><br><input value=""></td> <td><input value="役職1"><br><input value=""></td> <td rowspan="3"> <input type="button" value="←この行にある8フォームを中国語漢字に変換"> </td> </tr> <tr> <td>肩書2</td> <td><input value="社名2"><br><input value=""></td> <td><input value="役職2"><br><input value=""></td> </tr> </tr> <tr> <td>肩書3</td> <td><input value="社名3"><br><input value=""></td> <td><input value="役職3"><br><input value=""> </td> </tr> <tr> <td rowspan="3"> <table> <tr> <td><input value="田中"></td> <td><input value="三郎"></td> </tr> <tr> <td><input value=""></td> <td><input value=""></td> </tr> </table> </td> <td>肩書1</td> <td><input value="社名1"><br><input value=""></td> <td><input value="役職1"><br><input value=""></td> <td rowspan="3"> <input type="button" value="←この行にある8フォームを中国語漢字に変換"> </td> </tr> <tr> <td>肩書2</td> <td><input value="社名2"><br><input value=""></td> <td><input value="役職2"><br><input value=""></td> </tr> </tr> <tr> <td>肩書3</td> <td><input value="社名3"><br><input value=""></td> <td><input value="役職3"><br><input value=""> </td> </tr> </table> （以下、同じ構造で２００名分のデータが続く）
お礼
fujillinさん、たびたびのご教示ありがとうございました。 おかげさまで、期待の動作を得ることができました! class="jpで対を判定するとのこと、こちらもよく理解できました。 これを本番環境に組み込めば、驚くほど作業効率が向上するはずです。 WebでOpenにするわけでなく、裏でわたしがシコシコやる作業の効率化ツールなのでなおさら助かります。 ともかく永久保存版とさせていただきます。本当にありがとうございました。