jQueryを使用して追加のテーブル行を挿入

Question

モバイルデバイス専用のテーブルに追加のテーブル行を挿入しようとしているため、すべてのテーブルデータセルがリストに表示されます。たとえば、レイアウトは現在2x2レイアウトですが、これを1x4として表示します。

</tr><tr>の代わりに</tr><tr>を入力すると、以下のコードが正しく機能するようになり、これが表示されます。問題は、テキストを削除して</tr><tr>と入力すると、それが有効にならず、ソースコード内でそれを見ることができないということです。

jQuery(document).ready(function(){ 
 
     jQuery(".desctable").find('td:nth-child(even)').append("</tr><tr>");; 
 
});

<table class="desctable"> 
 
    <tr> 
 
    <td>Table Data 1</td> 
 
    <td>Table Data 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table Data 3</td> 
 
    <td>Table Data 4</td> 
 
    </tr> 
 
</table>

だから、基本的に私はこのように、フロントエンドの結果を必要とする：

<table class="desctable"> 
 
    <tr> 
 
    <td>Table Data 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table Data 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table Data 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table Data 4</td> 
 
    </tr> 
 
</table>

これが機能しない理由誰が助言していただけますか？何かお手伝いいただきありがとうございます。

Answer 1

jQueryのappend()メソッドでは、要素またはテキストノードをDOMにのみ挿入できます。 </tr><tr>は、要素またはテキストノードではありません。

代わりに、新しい行に前の行の最後のセルを移動するappend()を使用して、それぞれの既存の行の後に行を挿入できます。

$('.desctable tr').each(function() { 
 
    $('<tr>')       //Create new row. 
 
    .append($(this).find('td:last')) //Add the last cell of the current row to it. 
 
    .insertAfter($(this));   //Place it after the current row. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="desctable"> 
 
    <tr> 
 
    <td>Table Data 1</td> 
 
    <td>Table Data 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Table Data 3</td> 
 
    <td>Table Data 4</td> 
 
    </tr> 
 
</table>

Answer 2

私は本当に使用することをお勧めしますさまざまな画面サイズのものをフォーマットするレスポンシブなCSSフレームワークです。

スケルトンCSSは非常に単純です：世界で http://getskeleton.com

誰もがブートストラップを使用しています。 http://getskeleton.com

Answer 3

あなただけの携帯にいくつかの行を表示し、ブートストラップを使用している場合、これを確認したい場合。ブラウザのサイズを変更して結果を確認してください。

<table class="desctable table table-bordered"> 
    <tr> 
    <td>Table Data 1</td> 
    <td>Table Data 2</td> 
    </tr> 
    <tr> 
    <td>Table Data 3</td> 
    <td>Table Data 4</td> 
    </tr> 
    <tr class="hidden-lg hidden-md hidden-sm"> 
    <td>Only mobile</td> 
    <td>Only mobile</td> 
    </tr> 
</table> 

http://codepen.io/airsakarya/pen/MyBzyw