テーブルのコンテンツをスタイルする方法は？

Question

私は動的にテーブルを作成します。

function createResultsTable(data) { 
    var table = $('<table id="tblResultsList">'); 
    var tr; 
    var td; 

    $.each(data.d.foundItems, function(i, item) { 

     var button = $('<button/>', { 
      text: item.code, 
      click: function() { CellClicked(item.x,item.y,"") } 
     }); 
     i % 3 === 0 && (tr = $('<tr>').appendTo(table)); 

     tr.append('<td>').prepend(button).end(); 
    }); 

    $('#rstSearch').append(table); 
} 

ここで、それは今のビューにどのように見えるか：

ここFiddleです。ここで

は、コンテンツの目的の外観である。ここでは

はFiddleです。

しかし、私は立ち往生しています。私は中心のコンテンツに移動してそれを二次的にする方法を知らない。

Answer 1

私は少しあなたのロジックを変更しました：

td = $('<td>').appendTo(tr) 
button.appendTo(td); 

といくつかのスタイルを追加しました。何かが明確でない場合https://stackoverflow.com/a/22835903/6053654

は聞いてお気軽に：https://jsfiddle.net/o2gxgz9r/14666/

あなたはtdの四角を作りたい場合は、ここソリューションです：ここでの作業フィドルです。

Answer 2

ハンドルバーの詳細については、こちらをご覧ください。このファイルでは、実際のHTMLを読み込み、動的に読み込むことができます。 This is the link。あなたはnpm install handlebarsでhadlebarsをインストールすることができます。

Answer 3

その行が間違っている：何それは実際に行うことはtrに'<td>'とbuttonを追加

tr.append('<td>').prepend(button).end(); 

です。 戻り値appendはtrであり、新しいtdタグではありません。あなたの代わりに何ができるか は次のとおりです。

$('<td>').append(button).appendTo(tr); 

Answer 4

のためのあなたのコンテンツを手配：

var arr = [{"id":1,"name":"Mike"},{"id":2,"name":"Tom"},{"id":3,"name":"Herman"},{"id":4,"name":"Ursula"},{"id":5,"name":"Sam"},{"id":6,"name":"Jenny"},{"id":7,"name":"Helga"},{"id":8,"name":"Nikolas"},{"id":9,"name":"Surgen"},{"id":10,"name":"Jorg"}]; 

var table_str='<table id="tblResultsList" border="1"></table>'; 
$('#rstSearch').append(table_str); 
var index=0; 
var index_total=0; 
var row_str=''; 
for(key in arr){ 
    index++; 
    index_total++; 
    if(index==1){ 
     row_str='<tr>'; 
    }; 
    row_str+='<td><input data-id="'+arr[key].id+'" class="my-btn" type="button" value="'+arr[key].name+'"></td>'; 
    if(index==4){ 
     row_str+='</tr>'; 
     index=0; 
      $('#tblResultsList').append(row_str); 
      row_str=''; 

    } 
    if(arr.length==index_total){ 
      row_str+='</tr>'; 
      $('#tblResultsList').append(row_str); 
    } 
}; 
var btn_max_width = 0; 
$('.my-btn').each(function(){ 
    var test_width=$(this).outerWidth(true); 
    btn_max_width = Math.max(btn_max_width, test_width); 
}); 
$('.my-btn').css({'width':btn_max_width, 'height':btn_max_width}); 


$('.my-btn').click(function(){ 
    var id=$(this).attr('data-id'); 
    alert(id); 
}); 

like this: