変数を結合する方法について

2013/08/13 12:22

このQ&Aのポイント

JavaScriptで変数を結合する方法について説明します。
変数の結合には「+」演算子を使用しますが、一部の書き方ではエラーが発生することがあります。
正しい書き方は「itemName + i」ではなく、「itemName[i]」です。

panasobi
お礼率56% (41/73)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/08/13 12:49 回答No.1

こんにちは。そのような変数の使い方の場合は配列を使うのが普通です。 itemName[i]のような感じです。 evalという関数を使うと入力された物がそのままJavaScriptとして評価されますがこういった場面ではあまり使わないと思います。また、ソース内容からjQueryを利用していると思いますのでもっとスマートに書けます。今の書き方じゃjQueryが活かされませんし、行数が変動したら都度組み直しです。動作についてはコメントに書いたので参考にしてみてください。動作サンプル http://hppg.moe.hm/okwave/qa/q8217735/ ==== JavaScript <script> $().ready ( function() { // buttonがクリックされたら $('button').click ( function() { // id="id-table1"にあるthのタグ分をループ $('#id-table1').find('th').each ( function() { // <th>タグの隣の<td>タグが値の為 // 自身の次のタグのtext()を取得 var value = $(this).next().text() - 0; // その値が0以上であるか if ( value > 0 ) { // 0以上の場合は<tr>～</tr>1行分のタグを生成する var html = '<tr><th>' + $(this).text() + '</th>'; html += '<td>' + value + '</td>'; // 生成したタグをid="id-table2"に追加する $('#id-table2').append ( html ); } }); }); }); </script> ==== HTML <h3>【Ａ表】</h3> <table summary="Ａ表" id="id-table1"> <tr><th>aaa</th><td>1000</td></tr> <tr><th>bbb</th><td>0</td></tr> <tr><th>ccc</th><td>500</td></tr> <tr><th>ddd</th><td>0</td></tr> <tr><th>eee</th><td>300</td></tr> </table> <button type="button">Ｂ表を生成</button> <h3>【Ｂ表】</h3> <table summary="Ｂ表" id="id-table2"> </table>

質問者

お礼 2013/08/13 18:29

こんなに早い回答を頂きビックリしています。本当にありがとうございました。そうですよね、やはり配列を使うんですよね。「配列」というヒントとご提示頂いたコードを元に私なりにコードを書いたら、なんとうまくできました。サンプルまで作って頂き、３倍ほどうれしかったです。どうもありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

babu_baboo
ベストアンサー率51% (268/525)

2013/08/13 13:26 回答No.2

<!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> </style> <body> <table border="1" id="A"> <caption>A表</caption> <tr><td>aaa <td> 1000 <tr><td>bbb <td> 0 <tr><td>ccc <td> 500 <tr><td>ddd <td> 0 <tr><td>eee <td> 300 </table> <table border="1" id="B"> <caption>B表</caption> <tbody></tbody> </table> <script> function isNotZero (cell) { 　return cell.textContent != 0;//innerText } function pickUpCells (rows) { 　return rows.cells[1]; } function addCloneTR (cell) { 　var tr = cell.parentNode; 　this.appendChild (tr.cloneNode (true)); } var table_a = document.querySelector ('#A'); var tbody_b = document.querySelector ('#B > tbody'); Array.prototype 　.map.call (table_a.rows, pickUpCells) 　.filter (isNotZero) 　.forEach (addCloneTR, tbody_b) </script> </body>

質問者