Прогулка по столу

Question

Я использую jQuery для ввода значений из объекта JSON в существующую пустую таблицу.

Что я хочу сделать, это заполнить таблицу сверху вниз, вместо того, что она делает сейчас - слева направо. Итак, как мне изменить этот фрагмент, чтобы выполнить то, что я хочу?

_.each(dataset, function(v, k){ 
    $("tr td:empty:first", "#myTable tbody").html("<strong>"+v+"</strong>"); 
}); 

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

Answer 1

Изменить ваш селектор:

$("tr td:empty:first:first-child", "#myTable tbody") 

Так что он соответствует только тогда, когда ячейка таблицы является первым ребенком его родителя , строка, поэтому будет вставляться только в первый столбец.

---

Редактировать: Метод для заполнения таблицы на основе известного и ограниченного число столбцов

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

var cells = [].concat(
    $('tr td:nth-child(1)').get(), 
    $('tr td:nth-child(2)').get(), 
    $('tr td:nth-child(3)').get(), 
    $('tr td:nth-child(4)').get() 
) 
_.each(dataset, function(v, k){ 
    $(cells).filter(':empty:first').html("<strong>"+v+"</strong>"); 
}); 

---

Edit: Generic версия

// create array to hold cells ordered by column 
var cells = []; 
// loop through desired columns adding to cells array 
// hint: you can specify column `from` and `to` in the for loop definition 
for(i=1;i<=4;i++) 
    cells = cells.concat($('tr td:nth-child('+i+')').get()); 

// loop through the data, populating each column in order 
_.each(dataset, function(v, k){ 
    $(cells).filter(':empty:first').html("<strong>"+v+"</strong>"); 
});  

Answer 2

Есть dataset массив? Если это так, что-то вроде этого:

var self; 
$('#myTable tr:has("td:empty")', function (index, elem) { 
    if (index < dataset.length) { 
     self = $(this); 
     self.find('td:empty').html("<strong>"+dataset[i]+"</strong>") 
    } 
}); 

..fredrik

Answer 3

Вот что я в конечном итоге делает, используя underscore.js итерировать набор данных:

var currentCol = 0; 
var currentRow = 0; 
var renderedCount = 0; 

_.each(dataset, function(v, k) { 

    /* Switch to a new column when we have rendered enough (4) 
    * elements vertically per column and reset the rowcounter. 
    */ 
    if (renderedCount % 4 === 0) { 
     currentCol++; 
     currentRow = 0; 
    } 

    // Inject our value as HTML into the first empty TD per column 
    $("tr:eq("+currentRow+") td:empty:first", "#mytable tbody").html(v); 

    // Increment current row count and our renderedCount 
    currentRow++; 
    renderedCount++; 
}); 

Огромное спасибо @BillyMoon за помощь!

Update:
Чтобы создать пустую таблицу, прежде чем делать выше, я сделал это:

// To allow repeating strings (n) times. Borrowed from someone on SO 
String.prototype.repeat = function(num) { 
    return new Array(num + 1).join(this); 
} 

// Setup our wanted maximum amount of columns horizontally and our table structure 
var maxColsPerRow = 4; 
var rowHTML = "<tr>"+'<td></td>'.repeat(maxColsPerRow)+"</tr>"; 
var datasetCount = _.keys(dataset).length; // Amount of properties in our dataset calculated with underscore.js keys()-method. 

// Append as many empty rows&cells to our table that we'll need 
$("#myTable tbody").html(rowHTML.repeat(Math.round(datasetCount/maxColsPerRow));