Заполните верхнюю часть стола jQuery?

Question

У меня есть объект под рукой, содержащий неизвестное количество свойств. Каждое из этих свойств я хочу представить в качестве элемента списка в table, где элементы распределяются равномерно сверху вниз между установленным числом столбцов, как показано ниже, или когда они достигают максимального числа.

Набор данных:

{"one", "two", "three", "four"} 

Результат я хочу:

one | three | 
two | four | 
     |  | 

Так как бы я сделать это с помощью JQuery?

Answer 1

Предполагая, что вам нужен стол и простое решение Javascript/jQuery. вы могли бы сделать что-то простое. Просто укажите длину объекта, разделите его на две части и постройте таблицу. См. Демонстрацию here

Не исповедуя это своего рода магия, но очень простой способ выполнить то, что вы продемонстрировали в своем вопросе (если я правильно понял). По крайней мере, надеюсь, это поможет вам начать.

JS:

var trCounter = 0; 

var myObj = ["one", "two", "three", "four", "five", "six", "seven"]; 

var objHalf = Math.round(myObj.length/2); // your example shows two columns 

$(myObj).each(function(i) { 

    if (i < objHalf) { 
     // build initial table rows and first column 
     $("#myObjOutput").append("<tr><td>" + myObj[i] + "</td></tr>"); 
    } 
    else { 
     // add subsequent column with remainder of data 
     $("#myObjOutput tr:eq(" + trCounter + ")").append("<td>" + myObj[i] + "</td>"); 
     trCounter++; 
    } 

}); 

HTML:

<div> 
    <table id="myObjOutput"> 
    </table> 
</div> 

CSS:

#myObjOutput td { 
    border: 1px solid black; 
    padding: 3px; 
} 

Answer 2

в CSS3 вы можете установить column-count атрибут вашего контейнера:

#container { 

    column-count: 2; 
    column-rule: 1px solid #000; 
    column-gap: 1em; 
}​ 

, а затем увеличить column-count с JQuery (JavaScipt) при необходимости.

---

Update

this см демку.