jquery - 复选框列表对齐到 2 或 3 列

Question

如何使用 css 或 jquery 将其更改为 2 列或 3 列，目前它在一列中

这是 fiddle 的链接。 http://jsfiddle.net/4510f0yx/1/

<table class="items table table-striped table-bordered table-condensed">
    <thead>
        <tr>
            <th id="operations_c0" class="checkbox-column">
                <input type="checkbox" id="operations_c0_all" name="operations_c0_all" value="1" class="select-on-check-all">
            </th>
            <th id="operations_c1">Permissions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Permission</strong>
            </td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_0" value="oAuthOperationCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_1" value="oAuthOperationRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_2" value="oAuthOperationUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_3" value="oAuthOperationDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_4" value="oAuthOperationList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_5" value="oAuthOperationManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_6" value="oAuthOperationSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Parent</strong>
            </td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_7" value="oAuthParentCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_8" value="oAuthParentRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_9" value="oAuthParentUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_10" value="oAuthParentDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_11" value="oAuthParentList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_12" value="oAuthParentManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_13" value="oAuthParentSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Role</strong>
            </td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_14" value="oAuthRoleCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_15" value="oAuthRoleRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_16" value="oAuthRoleUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_17" value="oAuthRoleDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_18" value="oAuthRoleList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_19" value="oAuthRoleManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_20" value="oAuthRoleSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
    </tbody>
</table>

Answer 1

我真的认为你需要用框架中的 3 列来构建你的 html，这比用 js 改变表更好。

但如果不是...

像这样添加到您的 HTML“colomn separator”类:

<tr class="extra">
   <td colspan="2" class="extrarow"><strong>Auth :: Permission</strong> </td>
</tr>

你的 js 可以是这样的:

$(function () {

    var columns = [];
    $('tr.extra').each(function (i) {

        var curr_col = $(this);   
        var next_col = $('tr.extra').eq(i+1); 

        var column = curr_col.nextUntil(next_col);

        columns[i] = column;        

    });

    columns.reverse();
    var len = columns.length;

    for (i = len-2; i >= 0; i--) {

        columns[i].each( function (index, value){

            var tds = $(this).children('td');
            columns[len-1].eq(index).append(tds);
            $(this).remove();

        }); 

    }

});

从这里开始 - jsfiddle