如何樣式表的內容？

我動態創建表：如何樣式表的內容？

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。

但我被卡住了。我不知道如何移動到中心內容並使其成爲二次方。

來源

2017-09-22 Michael

你有沒有注意到，你的按鈕在細胞？ –

其實它們在每一行中的同一個單元中 –

不，它們在沒有單元的行中 –

我已經改變了你的邏輯一點：

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

，並增加了一些風格。這裏是工作提琴：https://jsfiddle.net/o2gxgz9r/14666/

如果你想td廣場，這裏是解決方案：https://stackoverflow.com/a/22835903/6053654

隨意問如果有什麼不明確。

來源

2017-09-22 14:21:16

閱讀更多關於把手將會更好。在這個文件中，您可以讀取真實的html並動態加載它。 This is the link。你可以用npm安裝把手來安裝hadlebars。

來源

2017-09-22 14:18:55

這條線是錯誤的：

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

什麼它實際上是追加'<td>'和button至tr。這是因爲append的返回值是tr，而不是新的td標記。你可以做的反而是：

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

來源

2017-09-22 14:24:23

爲您安排的內容：

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:

來源

2017-09-22 15:22:23 mscdeveloper

如何樣式表的內容？

回答

相關問題