Question

I am using jQuery to inject values from an JSON object into an existing, empty table.

What I want to do is fill up my table top-to-bottom, instead of what it does now – left to right. So how would I modify this snippet to accomplish what I want?

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

I guess that It would be possible to target the td in the column which has the fewest filled rows, but how?

Answer 1

Change your selector to:

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

So that it matches only when the table cell is the first-child of it’s parent, the row, so will only insert in the first column.

---

Edit: A method to populate the table based on a known and limited number of columns

It works by selecting each table column using the nth-child of each row, then concatenating the columns together, and filtering for the first empty one.

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 version

// 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>");
});