jQuery addClass example

Change class name on click in jQuery

by iori horigome

HTML

<table id="testTable" border="1">
<tbody>
</tbody>
</table>

JavaScript

var data = [
  { city: "関東", pref: "東京" },
  { city: "関東", pref: "千葉" },
  { city: "関東", pref: "神奈川" },
  { city: "関東", pref: "埼玉" },
  { city: "中部", pref: "名古屋" },
  { city: "近畿", pref: "大阪" },
  { city: "近畿", pref: "京都" }
]

// 上のデータをrowspanを出せるように、以下のようにする。
/* var data = [
  { city: ["関東",4] pref: "東京" },
  { pref: "千葉" },
  { pref: "神奈川" },
  { pref: "埼玉" },
  { city: ["中部",1], pref: "名古屋" },
  { city: ["近畿",2], pref: "大阪" },
  { city: pref: "京都" }
] */

var c = 0
data.forEach((d, i) => {
  if (i + 1 === data.length || data[i].city !== data[i + 1].city) {
    if (c > 0) {
      for (t = 0; t < c; t++) { delete data[i - t].city }
      data[i - c].city = [data[i - c].city, c + 1]
      c = 0
      return
    } else {
      data[i].city = [data[i].city, 1]
    }
  }
  if (data[i].city === data[i + 1].city) {
    c++
  }
})

console.log(data)


data.forEach(function (d) {
  var row = `<tr>`
  if (d.city)
    var row_city = `<th rowspan="${ d.city[1] }" >${ d.city[0] }</th>`
  else
    var row_city = ``
    var row_pref = `<td>${ d.pref }</td>`
    var row_end = `</tr>`
    var row_mixed = row + row_city + row_pref + row_end
$("#testTable").append(row_mixed)
})