如何设置表格内容的样式？答案

【问题标题】：How to style table's content?如何设置表格内容的样式？
【发布时间】：2018-03-04 03:27:07
【问题描述】：

我动态创建表：

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。

但我被困住了。我不知道如何移动到中心内容并使其成为二次方。

【问题讨论】：

您是否注意到您的按钮不在单元格中？
实际上它们在每一行的同一个单元格中
不，它们在没有单元格的行中

标签： javascript jquery html css

【解决方案1】：

阅读更多关于车把的信息会更好。在此文件中，您可以读取真正的 html 并动态加载它。 This is the link。您可以使用 npm install handlebars 安装 hadlebars。

【讨论】：

【解决方案2】：

我稍微改变了你的逻辑：

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

并添加了一些样式。这是工作小提琴：https://jsfiddle.net/o2gxgz9r/14666/

如果你想让tds 变成正方形，这里是解决方案：https://stackoverflow.com/a/22835903/6053654

如果有什么不清楚的地方可以随时提问。

【讨论】：

【解决方案3】：

那行是错误的：

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

它实际上所做的是将'<td>' 和button 附加到tr。那是因为append 的返回值是tr，而不是新的td 标签。你可以做的是：

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

【讨论】：

【解决方案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:

【讨论】：