Максимизируйте количество ячеек одинаковой ширины в таблице с помощью jQuery - PullRequest
Новая
       11

Максимизируйте количество ячеек одинаковой ширины в таблице с помощью jQuery

2 голосов
/ 30 марта 2012

Я хотел бы создать таблицу с использованием div, где каждая строка содержит максимальное количество ячеек одинакового размера на основе текстового содержимого в ячейках. В конце я загружу массив строк, используя AJAX. Я хотел бы иметь возможность определить максимальную ширину ячейки для самой длинной строки, если бы браузер отображал их априори, а затем использовать эту информацию для вычисления максимального количества ячеек в ряду, если бы все ячейки были иметь ширину, максимальную.

У меня возникли проблемы с вычислением размера ячейки max, так как я их динамически генерирую и вставляю в таблицу, функция 'width' всегда возвращает 0, поскольку они еще не были отрисованы.

Пример того, что я хотел бы сделать концептуально, выглядит так: 

 <!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>

<style type="text/css">
.dtable {display: table;}
.drow {display: table-row;}       
.dcell { 
    font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;
    display: table-cell; padding: 10px; outline:black solid thin; background-color: yellow;
}
.dcell > * {vertical-align: middle; }
</style>

<script type="text/javascript">
    $(document).ready(function() {      
        var w = $('#qcell2').width();
        alert(w);

        $('#qcell4').width(w);
        $('#qcell5').width(w);
        $('#qcell6').width(w);
    }); // end document-ready callback
</script>

</head>
<body>
    <div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;">
        <div id="qrow" class="drow" style="">
            <div id="qcell1" class="dcell">text</div>
            <div id="qcell2" class="dcell">a lot more text</div>
            <div id="qcell3" class="dcell">some text</div>
        </div>
    </div>
    <div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;"> 
        <div id="qrow" class="drow">
            <div id="qcell4" class="dcell">text</div>
            <div id="qcell5" class="dcell">a lot more text</div>
            <div id="qcell6" class="dcell">some text</div>
        </div>      
    </div>
</body>
</html>

I made a screenshot available here

Обратите внимание: я позволил браузеру отобразить три ячейки в одной таблице, и, поскольку я могу визуально увидеть, что # qcell2 - самая длинная, я рисую вторую таблицу, задающую все значения ширины, которые я определяю шириной из # qcell2. Так как я могу позволить браузеру сначала визуализировать все ячейки, а таблица достаточно широка, чтобы браузер не пытался сжать ячейки, я получаю удобную максимальную ширину для всех ячеек. Я хочу использовать эту информацию, чтобы теперь вычислить, сколько ячеек в строке я могу нарисовать так, чтобы все они имели одинаковый размер и использовали всю недвижимость, доступную для таблицы.

Опять же, в конечном счете, я начну с простого массива строк и создам таблицу с ячейками для максимально возможного количества строк в таблице, чтобы они были одинакового размера, равного размеру ячейки. держа самую широкую строку.

1 Ответ

0 голосов
/ 30 марта 2012

Если вы хотите отобразить таблицу, используйте <table>.Он делает все, что вам нужно, без использования JavaScript!

В таблицах нет ничего плохого, если вы используете их для отображения табличных данных.

...