0

我是 JQuery 的新手，我正在寻找一种方法来对我完全使用 div 而没有表结构创建的表进行排序。我对行有相同的 id，因为我认为我可以找到一种方法来做到这一点。这是我的代码：

    <div class="column_title">Column 1</div>
        <div class="column1">
            <div class="each_column">
                <span class="column1_class" id="row1">Value 1</span>
            </div>
            <div class="each_column">
                <span class="column1_class" id="row2">Value 2</span>
        </div>
            <div class="each_column">
            <span class="column1_class" id="row3">Value 3</span>
        </div>
            <div class="each_column">
            <span class="column1_class" id="row4">Value 4</span>
        </div>
        </div>
    </div>
    <div class="column_title">Column 2</div>
    <div class="column2">
        <div class="each_column">
        <span class="column2_class" id="row1">Value A</span>
        </div>
    <div class="each_column">
        <span class="column2_class" id="row2">Value B</span>
    </div>
    <div class="each_column">
        <span class="column2_class" id="row3">Value C</span>
    </div>
    <div class="each_column">
        <span class="column2_class" id="row4">Value D</span>
    </div>
    </div>
    <div class="column_title">Column 3</div>
    <div class="column1">
        <div class="each_column">
        <span class="column3_class" id="row1">Value AA</span>
    </div>
    <div class="each_column">
        <span class="column3_class" id="row2">Value AB</span>
    </div>
    <div class="each_column">
        <span class="column3_class" id="row3">Value AC</span>
    </div>
    <div class="each_column">
        <span class="column3_class" id="row4">Value AD</span>
    </div>
</div>

作为新手，我不确定如何解决这个问题。我必须使用 div 结构，所以关于如何去做的任何指导？

4

2 回答 2

0

也许你可以使用display : table. 看到这个链接

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

我不是这个的忠实粉丝，但在你的情况下它可能会有所帮助。

于 2013-05-29T13:30:34.037 回答
0

为了将来参考，我遇到了类似的问题，最后编写了一个自定义函数来<div>使用纯 Javascript 对由 s 构建的表进行排序。

JSFiddle 示例：https ://fiddle.jshell.net/L4s73n44/43/

使用javascript排序的div表

实际上，如果您的所有 s 都有 ID，那么编程非常简单<div>（在我的例子中，我使用了一个辅助类来动态生成表）。为了使用我的简单功能，您需要使用以下语法：

  • <th>：[table_name]_HEADER_COL_[COLUMN_NUMBER]<div class="VISIBLE_HEADER SIZE_LIMITER XS_AJUSTMENT " name="RESOURCE_TABLE_HEADER_COL_2" id="RESOURCE_TABLE_HEADER_COL_2">

  • <tbody>: [table_name]_TBODY<div id="RESOURCE_TABLE_TBODY" class="tbody">

  • <tr>：[table_name] TR [ROW_NUMBER]<form class="VISIBLE_TR_ODD" name="RESOURCE_TABLE_TR_1" id="RESOURCE_TABLE_TR_1">

  • <span>在表格单元格内：[table_name] COL [COLUMN_NUMBER]_SPAN<span name="RESOURCE_TABLE_COL_2_ROW_1_SPAN" id="RESOURCE_TABLE_COL_2_ROW_1_SPAN">MAXIME</span>

注意：注意命名约定，JavascriptgetElementById()函数区分大小写。

在标题单元格中，您可以使用 glyphicon 中的排序功能（在此示例中是 font-awesome glyphicon），如下所示：

<div style="float:right;">
    <i class="fa fa-sort-asc fa-lg" aria-hidden="true" onclick="sortDivTableColumn('RESOURCE_TABLE_HEADER_COL_2', true);"></i>&nbsp;
    <i class="fa fa-sort-desc fa-lg" aria-hidden="true" onclick="sortDivTableColumn('RESOURCE_TABLE_HEADER_COL_2', false);"></i>
</div>

完整的功能代码：

/**
* Sort a specified column in a table (or <div> table) by using the tag IDs.
*
* @param columnID String ID of the column that we want to sort.
*
* @param asc Bool 
*       False: Sort in descending order.
*       True: Sort in ascending order.
*/
function sortDivTableColumn(columnID, asc)
{
    var match;

    if (typeof columnID === "string" &&
        (match = columnID.match(/^(\w+)_HEADER_(COL_[\d]+)$/))
    ) {

        var body;
        var html = [];
        var index = 1;
        var row;
        var span;
        var total;

        while ((span = document.getElementById(
            match[1] + '_' + match[2] + '_ROW_' + index + '_SPAN')
        )) {

            if ((row = document.getElementById(match[1] + '_TR_' + index))) {

                html.push({
                "data" : span.innerHTML, 
                "row" : row.outerHTML
                });

                } else { //can't fetch the whole row

                html.length = 0;

                break;
            }

            index++;
        }

        row = null;
        span = null;

        if ((total = html.length) > 0) {

            if (Boolean(asc)) {

                html.sort(function(a, b) {
                    return a.data.localeCompare(b.data);
                });

            } else {

                html.sort(function(a, b) {
                    return a.data.localeCompare(b.data) * -1;
                });
            }

            var buffer = "";

            for (index = 0; index < total; index++) {

                buffer += html[index].row;
            }

            html.length = 0;

            document.getElementById(match[1] + '_TBODY').innerHTML = buffer;

            buffer = null;
        }
    }
}

最后说明：如果您没有<span>在表格单元格中使用 s，请替换此行：

while ((span = document.getElementById(
    match[1] + '_' + match[2] + '_ROW_' + index + '_SPAN')
)) {

经过 ：

while ((span = document.getElementById(
    match[1] + '_' + match[2] + '_ROW_' + index)
)) {

好成功的互联网

于 2017-10-24T19:28:05.887 回答