前提・実現したいこと
tableのtdに自動でrowspanを付与させたい
<table> <tbody> <tr> <td>ひだり</td> <td>みぎ</td> </tr> <tr> <td>ひだり</td> </tr> <tr> <td>ひだり</td> </tr> <tr> <td>ひだり</td> <td>みぎ</td> </tr> <tr> <td>ひだり</td> </tr> <tr> <td>ひだり</td> </tr> </tbody> </table>
上記のようなコードの場合、「みぎ」のtdにrowspan=3を付与させたい
→ tdの数を取得して自動でそれに対応したrowspanを付与させたい
発生している問題・エラーメッセージ
以下のような処理を書いてみたのですが最後のグループのtrのrowspanだけ正しく付与されません。。。
- 配列でtrの中のtdの数を配列に取得(上記のコードの場合、[2,1,1,2,1,1])
- tdが2つあって、かつtrのtdのlast-of-typeにdata属性追加(row-spanを最後に付与させるための目印)
- row-spanを追加したい要素に対して繰り返し
- その中でさらに配列で繰り返しして、2が来たらストップ
- 1の数を合計して、さらに1足す → それをrow-spanの値として付与させる
該当のソースコード
$(function(){ var $tr = $('table tr'), arry = [] arryNum = 0 $tr.each(function(){ var count = $(this).children().length if(count !== 1){ $(this).attr('data-row', 'rowspan') } arry.push(count) }) $('table tr[data-row=rowspan]').each(function(){ arry.shift() var num = 0 for (let i = 0; i < arry.length; i++) { var value = arry[0] console.log(arry) if (value !== 1) { console.log(arry) break } num++ arry.shift() } $(this).find('td:last-of-type').attr('rowspan', num + 1) }) })
consoleで見てみたところ、最後のrow-spanのグループになったら、配列の値が1なのに途中で抜け出してしまっているみたいなのですが、その原因がわからず困っています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/10/02 10:55