0

Javascript を使用して、このテーブル全体を 3 つのサブテーブルに分割したいと思います。各テーブルは、ヘッダー情報を保持する必要があります。

ID やクラスは Web アプリケーションによって生成されるため、調整することはできません。そのため、利用可能なもので間に合わせる必要があります。

私はかなり長い間 Jfiddle でこれをクラックしようとしてきましたが、イライラしています。私は Javascript にはかなり慣れていませんが、これに多くのコードが必要になるとは想像できません。これを行サイズで分割する方法（つまり、テーブルを分割しますが、選択的に分割する方法）を誰かが知っている場合は、それも高く評価されます。

Javascript と Jquery 1.7 に制限されています。

<div id="serviceArray">
    <table border="1" class="array vertical-array">
        <thead>
            <tr>
                <th>#</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Savings</th>
                <th>Expenses</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Sum</td>
                <td>$180</td>
                <td>$500</td>
                <td>$300</td>
                <td>$700</td>
                <td>$600</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>Home</td>
                <td>$100</td>
                <td>$200</td>
                <td>$200</td>
                <td>$300</td>
                <td>$400</td>
                <td>$500</td>
            </tr>
            <tr>
                <td>Work</td>
                <td>$80</td>
                <td>$300</td>
                <td>$100</td>
                <td>$400</td>
                <td>$200</td>
                <td>$500</td>
            </tr>
        </tbody>
    </table>
</div>
4

2 に答える 2

2

このような意味でしたか？

   var tables = $('#serviceArray table tbody tr').map(function () { //For each row
   var $els = $(this).closest('tbody') //go to its parent tbody
              .siblings('thead').add(   //fetch thead 
                         $(this)  //and add itself (tr) 
                           .wrap($('<tbody/>')) //wrapping itself in tbody
                           .closest('tbody')); //get itself with its tbody wrapper
        return $els.clone()        //clone the above created steps , i.e thead and tbody with one tr
                    .wrapAll($('<table/>', {     //wrap them all to a new table with 
                          'border': '1',         //attributes.
                          'class': 'array vertical-array'
                    })
                ).closest('table');   //get the new table

   }).get();

$('#serviceArray table').remove();

$('body').append(tables);  //append all to the table.

デモ

または、単純にテーブルのクローンを作成し、tbody からこれ以外のすべての trs を削除して、DOM に追加します (Much Shorter Solution)。

var tables = $('#serviceArray table tbody tr').map(function (idx) {
    var $table = $(this).closest('table').clone().find('tbody tr:not(:eq(' + idx + '))').remove().end();
    return $table;
}).get();

デモ

使用される各方法には、Web で入手可能なドキュメントがあり、これを使用して、必要なものを自分で解決できます。

于 2013-10-12T03:10:39.747 に答える