tableのセルをjsで連結する

Question

参考：テーブルのセルで 同じ内容だったらマージする

jsに関して全くの素人です。日々手を動かしながら勉強しています。
練習で使った動作確認済みのコードで書き方を理解しようと思い、質問させていただきました。

状況：
・Japanモデルにprefectureカラム＆cityカラム
・@japanにデータを.all

<table id="tokyo">
  <% @japan.each do |f| %>
  <tr>
    <td class="tokyo-td1"><%= f.prefecture %></td>
    <td><%= f.city %></td>
  </tr>
  <% end %>
</table>

結果：
|東京|港区　|
|東京|墨田区|
|東京|中央区|

わかりにくくて申し訳ないですが、以下のコードで、同じ値（この場合は「東京」）を持つセルが結合されます。

$(function() {
	var counter = 0;
	var text ="";
	var target="";
	$($('#tokyo tr:first, .tokyo-td1').get().reverse()).each(function() {
	  if ($(this).text() == text) {
		counter++;
		if(target !="")
			target.remove();
	  } else  {
		if(target !="")
			target.attr('rowSpan', counter);
		counter=1;
	  }
	  text = $(this).text();
	  target = $(this);
	});
});

結果(after)：
|東京|港区　|
|　　|墨田区|
|　　|中央区|

わかりにくいですが、東京のrowspanが3になって結合されています。

このスクリプトが理解できていないので、どなたか詳しい方に解説していただきたいです。

※上と同じもの

$(function() {
	var counter = 0;
	var text ="";
	var target="";
	$($('#tokyo tr:first, .tokyo-td1').get().reverse()).each(function() {　　← Q1：なぜ.reverse()？
	  if ($(this).text() == text) {
		counter++;　　← Q2：++って何？
		if(target !="")　　← Q3：(target !="")ってどういうこと？というかこのtargetって具体的にどこを指してる？
			target.remove();
	  } else  {
		if(target !="")
			target.attr('rowSpan', counter);
		counter=1;　　← Q4：これは何？
	  }
	  text = $(this).text();　　← Q5：この記述は何のため？
	  target = $(this);　　← Q6：この記述は何のため？
	});
});

コード内にQ1～Q6まで書きました。他にもわからない点がありますが、とりあえず1~6について理解すればわかるかもしれないので、どなたか解説お願いします。

本当に全くの初心者です。お手柔らかにお願いします。

Answer 1

初心者ということで、まずは次のようなアドバイスを送ります。

仕組みがわからないときは実際に動かしてみるのがベターです。
今回のスクリプトの場合、データ割り当て後ののHTMLを用意することで、chromeやIEなどのデバッガで自由に変数を確認することができます。
こういったことができることは非常に有用ですのでやってみてください。

また、プログラミングは結局のところ、人ができることを代わりにやってもらってるわけですので、
自分ならどういうふうにセルを結合するか一度考えてみてください。
大抵、その考えに似たものがコードになっていることが多いです。

次に、Qに答える前にどのような仕組みかをざっくりと述べます。

そのほうがわかりやすいと思うので。これは、ひとつ前に述べたアドバイスを実施してるにすぎませんが…

1. prefectureのセルをまとめて取得する
2. セルを下からくっつけるかくっつけないか確認する（下から確認する代わりに反転させている）
   今のセルである$(this)と前のセルであるtargetのテキストを比較して、
   同じ場合: くっつける数(Rowspanの数)を表すcounterを+1する
   異なる場合: 前のセルのRowspanを設定する

という感じです。細かいところは、頭の中で変数の値がどう変わるかを考えてみてください。

次にQへの回答です

$(function() {
    var counter = 0;
    var text ="";
    var target="";
    // Q1: なぜ.reverse()？
    // A1: 削除や統合などの処理を行う場合、前から処理すると、
    //     削除したときに後ろの要素が前に詰まりますよね？それが原因で
    //     配列の処理がおかしくなるケースがあったりします（処理の内容による）。
    //     習慣として、後ろから処理してるのかなと推察します。
    $($('#tokyo tr:first, .tokyo-td1').get().reverse()).each(function() {
      if ($(this).text() == text) {
        // Q2: ++って何？
        // A2: この場合、counter += 1 と同じです。
        //     ++自体はインクリメント演算子といい、詳細はぐぐってください。
        counter++;　　
        // Q3: (target !="")ってどういうこと？というかこのtargetって具体的にどこを指してる？
        // A3: targetが初期値でないことを確認しています。targetは
        //     ひとつ前のセルを表しますが、初回に限っては
        //     var target = ""とされており、ひとつ前のセルではないです。
        //     初回はひとつ前のセルが存在しないので妥当な処理だと思います。
        if(target !="")
            target.remove();
      } else  {
        if(target !="")
            target.attr('rowSpan', counter);
        // Q4：これは何？
        // A4: counterの値を1に初期化しないと、counterの値が増え続け、
        //     東京以外のセルが出てきた場合にそのセルまでくっつくことになります。
        //     なので、こうしてます。
        counter=1;
      }
      // Q5: この記述は何のため？
      // A5: セルのテキストを保持しておきます。次の確認で、
      //      前のセルのテキストとして利用するためですね。
      text = $(this).text();
      // Q6: この記述は何のため？
      // A6: セルを保持しておきます。次の確認で、前のセルとして利用するためです。
      target = $(this);
    });
});

Comments

[Gr.]

ppnさん
たいへん詳しい回答ありがとうございます！
今のセルである$(this)と前のセルであるtargetのテキストを比較して、同じ場合と異なる場合の処理をif,elseで書いているわけですね。
そして最後尾のtext = $(this).text();とtarget = $(this);でそのセルの情報をキープして次の処理に渡しているのですね。
よくわかりました！

今度はこれを応用した処理を書いてみようと思いますが、たぶんまたどこかでつっかかって質問することになると思うので、見かけたらまた助けてください。
ありがとうございました！

[退会済みユーザー]

はい、その理解であってると思います。頑張ってください^^

Answer 2

元ソースは無視してこんな感じでどうでしょう？

<script>
$(function(){
  $($('#tokyo tr').get().reverse()).each(function(){
    if($(this).prev('tr').length>0){
      var pre=$(this).prev('tr').find('td:eq(0)');
      var self=$(this).find('td:eq(0)');
      if(pre.text()==self.text()){
        pre.attr('rowspan',parseInt(self.attr('rowspan')||"1")+1);
        self.remove();
      }
    }
  });
});

</script>
<table id="tokyo">
<tbody>
<tr>
<td>東京</td>
<td>港区</td>
</tr>
<tr>
<td>東京</td>
<td>港区</td>
</tr>
<tr>
<td>神奈川県</td>
<td>横浜市</td>
</tr>
<tr>
<td>神奈川県</td>
<td>横浜市</td>
</tr>
<tr>
<td>東京</td>
<td>港区</td>
</tr>
<tr>
<td>東京</td>
<td>墨田区</td>
</tr>
<tr>
<td>東京</td>
<td>中央区</td>
</tr>
<tr>
<td>神奈川県</td>
<td>横浜市</td>
</tr>
</tbody>
</table>