如何为表格内容添加样式？

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。

但我卡住了。 我不知道如何将内容居中并使其成为正方形。

- Michael

---

你有没有注意到你的按钮不在单元格中？ - Marco Salerno

实际上它们在每一行中都在同一个单元格中。 - CMartins

不，它们在没有单元格的行中。 - Marco Salerno

Answer 1

那行代码是错误的：

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

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

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

- lampyridae

Answer 2

我稍微修改了你的逻辑：

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

并且已经添加了一些样式。这是工作的fiddle：https://jsfiddle.net/o2gxgz9r/14666/

如果您想使td正方形，这里是解决方案：https://dev59.com/YmAh5IYBdhLWcg3wE__v#22835903

如果有任何不清楚的地方，请随时询问。

- P.S.

Answer 3

如何安排您的内容：

 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:

- mscdeveloper

Answer 4

阅读更多关于handlebars的内容会更好。在这些文件中，您可以阅读真正的HTML并动态加载它。这是链接。您可以通过npm install handlebars安装hadlebars。

- Симеон Симеонов