質問: 既存のjsコードをhtmlサンプルに組み込みたい(日本語漢字の中国漢字 既存のjsコードをhtmlサンプルに組み込みたい(日本語漢字の中国漢字に変換) 以下のjsサンプルがあります。 簡体字と日本語漢字の相互変換ツール kanconvit を公開 http://blog.livedoor.jp/dankogai/archives/51224227.html これを、文末のhtmlサンプルに組み込み、次の動作をさせたいのですが、jsのサンプルコードをご教示いただけますと幸いです。 (1) 一行にテキストフォームが8つあり、各行ごと処理するボタンが設置されている。 (2) ボタンを押下すると、8フォームに対して、上段(緑)の日本語文字列が、中国語漢字に置換されて下段(黄)に中国語文字列が表示される。 (3) 対象漢字がない場合や、ひらがな/カタカナは変換せず、元の漢字を表示。 (4) 【参考】変換結果は、各行ごと配列に格納し、phpでmysqlに格納されます。 ※名簿の下訳(省力化)が目的であり、厳密な「翻訳」を期待するものではありません。 ※htmlサンプルが長いので、回答no1に示します。 よろしくお願い致します。
回答: #2です。 説明をしていると長くなりますが、要素を特定する方法をどのように考えるかということで、単純化できればそれだけ処理を簡単にできると言う意味です。 想像するところ、ソースはサーバー側のソフトから自動出力されるもののようなので、ソースの間違いまでは考慮しなくても良さそうではありますが... htmlを変更しても良いのか不明ですが、例えば以下のサンプルのようにすれば、対になるinputが必ず連続するようになるかと思います。 #2の例では変換対象の識別に「type、class名」を、対の識別に「type、name、class名」で確認していましたが、簡略化して、変換対象はclass="jp"のものとし、対のものはその直後のinput(かつclass="cn")と限定しています。 ついでに、入れ子のtableもはずしてあります。 (ダミーのkanconvitが入っていますので、削除してください。) 文字数制限の都合上分割されちゃいます。 (例示のセットも2個。スクリプトに必要のない属性も省略しました。) test 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; } | | | | | | | --- | --- | --- | --- | --- | | | 肩書1 | | | 中国語←漢字変換 | | 肩書2 | | | | 肩書3 | | |