Question

我想创建一个十行五列表，其中只有两行填充，每行的第一个单元格都有一个复选框。我想在jquery的脚本中编写整个表代码，但是没有在html页面中将其定义为硬编码数据。我希望它作为数组而不是每行的单个变量。

$(document).ready(function() {
var table = [

{ 
  check: '<label><input type="checkbox" class="case" /><span></span>
  </label>',
  name: 'XYZ',
  score: '<div class="score">34</div>',
},
{ 
  check: '<label><input type="checkbox" class="case" /><span></span>
  </label>',
  name: 'XYZ',
  score: '<div class="score">34</div>',
},
{ 
  check: '<label><input type="checkbox" class="case" /><span></span>
  </label>',
  name: 'XYZ',
  score: '<div class="score">34</div>',
},

 $.each(table, function(index, obj)
 {
var row = '<tr>';
row += '<td>' + obj.check + '</td>';
row += '<td>' + obj.name + '</td>';
row += '<td>' + obj.score + '</td>';
row += '<td>' + obj.mail + '</td>';
row += '<td>' + obj.other + '</td>';
$('tbody').append(row);
});

我不想每次都声明对象。我想使用数组来定义＆＃34;名称，分数，邮件，其他＆＃34;然后将相关项目推送到该数组变量

Answer 1

通过以下代码替换循环

  $.each(table, function(index, obj)
     {
       var row = '<tr>';
       var keys = Object.keys(obj);
       $.each(keys, function(index, val){
         row += '<td>' + obj[val] + '</td>';
      });
      row += '</tr>';
      $('tbody').append(row);
    });

在这里你可以看到如何迭代一个对象来获取所有的键值，所以你不需要显式地写obj.name，obj.type等。

Answer 2

如果我理解正确的话，这应该提供你所需要的。所有内容（包括列，标题和内容），要呈现的行数以及要显示的数据都是通过元素数组配置的。这里没有硬编码的HTML，它们都可以通过JavaScript进行操作。

我希望这很有用。

＆＃13;

$(document).ready(function() {
//pre-defined array of columns and their base content
var cols = {
  "Check": $("<input/>", { "type": "checkbox", "class": "case" }),
  "Name": $("<span/>", { html: "&nbsp;" }),
  "Score": $("<div/>", { "class": "score" }), 
  "Mail": $("<span/>", { html: "&nbsp;" }), 
  "Other": $("<span/>", { html: "&nbsp;" })
};

var trows = 10; //total rows to render
var data =
[
 { "Name": "ABC", "Score": 34, "Mail": "xyz", "Other": "blah" },
 { "Name": "DEF", "Score": 43, "Mail": "iii", "Other": "fff"}
];

for (var i = 0; i < trows; i++)
{
  var tr = $("<tr/>");
  
  $.each(cols, function(prop, element)
  {
    //only create the header once
    if (i == 0)
    {
      var th = $("<th/>", { "text": prop });
      $("#table1 thead tr").append(th);
    }

    var td = $("<td/>");
    
    if (element)
    {
      var cellContent = element.clone();
      if (data[i] && data[i][prop])
      {
        cellContent.text(data[i][prop]);
      }
      td.append(cellContent);
    }
    tr.append(td);
  });
  
  $("#table1 tbody").append(tr);
}

});

＆＃13;

table {
    border-collapse: collapse;
}
table td, table th { border: solid 1px #cccccc; padding:10px;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

＆＃13;

在html中创建一个没有硬编码的表

2 个答案: