Question

我构建了一个相当复杂的jQuery，它执行以下操作：

1。）查找具有flex类

的所有<col>和<td>

2.。）从数据值存储列宽（这是因为可以覆盖宽度，因此它存储在HTML5数据属性中）

3.。）获取<td>（具有flex类）的宽度，并使用它检查列宽。如果它比原件大，那么将其设为100％或使其成为原始宽度。

4。）每次用户移动浏览器窗口时都会运行

我遇到的问题是，因为它们是多列flex，或者只能是我使用查找cols和tds的方法，然后还存储它们的索引，因为它们之间没有直接关系和一个可以使用CSS或JS跟踪的td。

这是HTML：

<div class="uiGrid flex">
    <table>
        <colgroup>
            <col class="flex" style="width:200px;" data-original="width:200px;" />
            <col style="width:100px;" data-original="width:100px;" />
            <col style="width:100px;" data-original="width:100px;" />
            <col class="flex" style="width:250px;" data-original="width:250px;" />
            <col style="width:100px;" data-original="width:100px;" />
        </colgroup>
        <thead>
            <tr>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <td class="flex">Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td class="flex">Cell</td>
            <td>Cell</td>
        </tbody>
    </table>
</div>

这是我的JS：

var columnWidth,columnIndex,cellWidth,cellIndex,columnData,thiscolumnWidth;

uiGrid = {

    getOriginal: function () {

        /* Check if the grid is flexible */
        if ($('.uiGrid.flex').length > 0) {

            columnData = new Array();
            // For each flex column
            $('.uiGrid table col.flex').each(function (i) {

                // Get its original width and strip out extra bits of css
                columnWidth = $(this).data('original');
                columnWidth = columnWidth.replace('width:', '');
                columnWidth = columnWidth.replace('px', '');
                columnWidth = columnWidth.replace(';', '');

                // Get its index
                columnIndex = $(this).index();

                // Creates an array of columnData with an array of data
                columnData[i] = new Array(columnWidth, columnIndex);
            });
        }
    },

checkWidth: function () {

        cellIndex = new Array();

        cellWidth = new Array();

        // For each flex cell in the first row
        $('.uiGrid table tr:first-child td.flex').each(function (i) {

            // Get its current width
            cellWidth[i] = $(this).width();

            cellIndex[i] = $(this).index();

            // For each columnData array
            $(columnData).each(function () {
                // If this columnData array second value matches the cellIndex
                //console.log('this' + this[1]);
                //console.log('cell' + cellIndex[i]);
                if (this[1] == cellIndex[i]) {
                    // thiscolumnWidth takes this columnData array first value as its value
                    thiscolumnWidth = this[0];
                }
            });

            // For each cellWidth array
            $(cellWidth).each(function () {
                console.log(this);
                                // If the cellWidth is less than the passed down column width
            if (this < thiscolumnWidth) {
                // Apply the original width to a col with an index that matches the cell index  
                $('col.flex:eq(' + cellIndex[i] + ')').css('width', thiscolumnWidth);
                $('td.flex:eq(' + cellIndex[i] + ')').css('background-color', '#ff0000');
            }
            else {
                // Apply a flexible width to a col with an index that matches the cell index
                $('col.flex:eq(' + cellIndex[i] + ')').css('width', '100%');
                $('td.flex:eq(' + cellIndex[i] + ')').css('background-color', '#ff0000');
            }

            });

        });
    }
};

$(document).ready(function () {
    uiGrid.getOriginal();
    uiGrid.checkWidth();
    $(window).resize(function () {
        uiGrid.checkWidth();
    });
});

所以问题是它无法正常工作！第一个带有flex的TD确实有效但不是第二个？所以好像它在某个地方与编号混淆了。

它们没有错误（注意：我在之前的例子中有这个工作，但后来改为使用flex类，所以我知道理论肯定有效）

任何人都可以看到任何明显的问题，或者能够测试出来，看看他们是否可以解决这个问题。

编辑：相当有趣的是，我添加了两个新行，将红色背景添加到应该更改的列的相对TD，它们是关闭的！但它确实为两个单元格着色，但是在不同的列和不同的行中都是这样，所以它绝对是计数的问题！

EDIT2：我为它创造了一个小提琴http://jsfiddle.net/mFxCy/

jQuery检查单元格的宽度并与其col进行比较

0 个答案: