.cloneの短縮コードを教えて下さい。

初めて質問します。不手際等ございましたら申し訳ございません。
以下のようにtable1行目のtdの内容を二行目以降にも表示させたいのですが
何かしら短縮させる方法等ございますか？
よろしくお願い致します。

該当のソースコード

$( function(){
	$("table tr:first-of-type td").wrapInner('<span>');
	$("table tr:first-of-type td:nth-of-type(2) span").clone().prependTo("table td:nth-of-type(2)");
	$("table tr:first-of-type td:nth-of-type(3) span").clone().prependTo("table td:nth-of-type(3)");
	$("table tr:first-of-type td:nth-of-type(4) span").clone().prependTo("table td:nth-of-type(4)");
	$("table tr:first-of-type td:nth-of-type(5) span").clone().prependTo("table td:nth-of-type(5)");   
	$("table tr:first-of-type td:nth-of-type(6) span").clone().prependTo("table td:nth-of-type(6)");
	$("table tr:first-of-type td:nth-of-type(7) span").clone().prependTo("table td:nth-of-type(7)");   
	$("table tr:first-of-type td:nth-of-type(8) span").clone().prependTo("table td:nth-of-type(8)");
	$("table tr:first-of-type td:nth-of-type(9) span").clone().prependTo("table td:nth-of-type(9)");   
});

<table>
<tr>
<td><span>プラン</span></td>
<td><span>データ容量</span></td>
<td><span>バージョン情報</span></td>
<td><span>料金</span></td>
</tr>
<tr>
<td>無料プラン</td>
<td> 5GB </td>
<td> なし </td>
<td> 無料 </td>
</tr>
<tr>
<td> 個人事業主プラン </td>
<td> 30GB </td>
<td>１ヶ月まで </td>
<td> 1000円/月 </td>
</tr>
<tr>
<td> 法人プラン </td>
<td> 100GB </td>
<td> 無制限 </td>
<td> 5000円/月 </td>
</tr>
</tbody>
</table>


↓↓↓↓↓↓↓↓

<table>
<tr>
<td><span>プラン</span></td>
<td><span>データ容量</span></td>
<td><span>バージョン情報</span></td>
<td><span>料金</span></td>
</tr>
<tr>
<td><span>プラン</span>無料プラン</td>
<td><span>データ容量</span> 5GB </td>
<td> <span>バージョン情報</span>なし </td>
<td> <span>料金</span>無料 </td>
</tr>
<tr>
<td><span>プラン</span>個人事業主プラン </td>
<td><span>データ容量</span> 30GB </td>
<td><span>バージョン情報</span>１ヶ月まで </td>
<td> <span>料金</span>1000円/月 </td>
</tr>
<tr>
<td><span>プラン</span>法人プラン </td>
<td><span>データ容量</span> 100GB </td>
<td><span>バージョン情報</span>無制限 </td>
<td> <span>料金</span>5000円/月 </td>
</tr>
</tbody>
</table>

hwatarig

2020/03/03 13:44

「二行目以降」というのは、html側で用意してある特定のtableの2行目から最後の行まで、ということでしょうか？

yambejp

2020/03/03 13:52

どういうHTML(table)からどういう結果を導きたいのか書いてもらったほうが早いかも

cie

2020/03/03 15:05

説明が足らず申し訳ございません。以下の様なテーブルを先程のコードを利用し <table> <tr> <td>プラン</td> <td>データ容量</td> <td>バージョン情報</td> <td>料金</td> </tr> <tr> <td>無料プラン</td> <td> 5GB </td> <td> なし </td> <td> 無料 </td> </tr> <tr> <td> 個人事業主プラン </td> <td> 30GB </td> <td>１ヶ月まで </td> <td> 1000円/月 </td> </tr> <tr> <td> 法人プラン </td> <td> 100GB </td> <td> 無制限 </td> <td> 5000円/月 </td> </tr> </tbody> </table> ↓↓↓↓↓↓↓↓ <table> <tr> <td>プラン</td> <td>データ容量</td> <td>バージョン情報</td> <td>料金</td> </tr> <tr> <td>プラン無料プラン</td> <td>データ容量 5GB </td> <td> バージョン情報なし </td> <td> 料金無料 </td> </tr> <tr> <td>プラン個人事業主プラン </td> <td>データ容量 30GB </td> <td>バージョン情報１ヶ月まで </td> <td> 料金1000円/月 </td> </tr> <tr> <td>プラン法人プラン </td> <td>データ容量 100GB </td> <td>バージョン情報無制限 </td> <td> 料金5000円/月 </td> </tr> </tbody> </table> このように変更したいと考えております。

kairi003

2020/03/03 15:11

質問文に追記してください

cie

2020/03/03 15:16

申し訳ございません！追記しました！

kairi003

2020/03/03 17:33

jqueryでspanをwrapInnerしてますけどソースのtr:first-of-typeにははじめからspanが入ってるんですか?

行動規範の内容に同意します

回答1件

ベストアンサー

forループ使わず動的に、だとこんな感じじゃないですかね。

javascript
1$(()=>{
2    $("table tr:first-of-type td").wrapInner('<span>');
3    $("table tr:first-of-type td span").each((i,span)=>$(span).clone().prependTo(`table tr:nth-of-type(n+2) td:nth-of-type(${i+1})`));
4 });

()=>{}はfunction() {}の代替構文です。短いし引数や返り値が一つのときは括弧を省略できてオススメです。
`...`はテンプレート文字列です。これで囲んだ文字列は改行を含めることができ、また${}の括弧内に書いた変数や式、関数を文字列にしてくれます。
例えば `1 GB is ${Math.pow(2,10)} MB` は '1 GB is 1024 MB'になります。

投稿2020/03/03 17:43

編集2020/03/03 17:55

kairi003

総合スコア1332