Question

我有一些对象：

public class record {

public int _id;
public String record_id;
public String unit_name;
public String activity;
public String phone1;
public String phone2;
public String address;
public String unit_number;
public String picture;
record(){};

record(String record_id,String unit_name,String activity,String phone1,String phone2,String address,String unit_number,String picture){

    this.record_id = record_id;
    this.unit_name = unit_name;
    this.activity = activity;
    this.phone1 = phone1;
    this.phone2 = phone2;
    this.address = address;
    this.unit_number = unit_number;
    this.picture = picture;


}
record(int _id, String record_id,String unit_name,String activity,String phone1,String phone2,String address,String unit_number,String picture){

    this._id = _id;
    this.record_id = record_id;
    this.unit_name = unit_name;
    this.activity = activity;
    this.phone1 = phone1;
    this.phone2 = phone2;
    this.address = address;
    this.unit_number = unit_number;
    this.picture = picture;


}
public void set_id(int id){

    this._id = id;

}
public int get_id(){

    return this._id;
}
public void set_record_id(String id){

    this.record_id = id;

}
public String get_record_id(){

    return this.record_id;
}
public void set_unit_name(String unit_name){

    this.unit_name = unit_name;

}
public String get_unit_name(){

    return this.unit_name;
}
public void set_activity(String activity){

    this.activity = activity;

}
public String get_activity(){

    return this.activity;
}
public void set_phone1(String phone1){

    this.phone1 = phone1;

}
public String get_phone1(){

    return this.phone1;
}
public void set_phone2(String phone2){

    this.phone2 = phone2;

}
public String get_phone2(){

    return this.phone2;
}
public void set_address(String address){

    this.address = address;

}
public String get_address(){

    return this.address;
}
public void set_picture(String picture){

    this.picture = picture;

}
public String get_picture(){

    return this.picture;
}
public void set_unit_number(String unit_number){

    this.unit_number = unit_number;

}
public String get_unit_number(){

    return this.unit_number;
}





}

我需要生成动态表，显示上面数组中的项目。该表应根据数组中的项目数包含3列和行。

例如，对于上面的arr我希望我的表是：

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}]

或者如果我的数组是：

<div id="here_table">
    <table>
          <tr><td>Mike</td><td>Tom</td><td>Herman</td></tr>
          <tr><td>Ursula</td><td>Sam</td><td>Jenny</td></tr>
         <tr><td>Helga</td><td>Nikolas</td><td>Surgen</td></tr>
          <tr><td>Jorg</td><td>Empty</td><td>Empty</td></tr>
    </table>
</div>

表格是：

var arr = [{id:1, name:Mike },{id:2, name:Sam},{id:3, name:Herman},
           {id:10, name:Jorg},{id:2, name:Tom}] ;

如何根据数组中的项目数实现具有3列和行的表。

Answer 1

通过将数组length除以3，向上舍入并减去length来计算空单元格的数量。

使用for循环迭代数组，直到数组的length +空单元格数量，并在索引％3等于0时添加新的<tr>（索引）可以被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 = $('<table>');
var tr;
var empty = Math.ceil(arr.length / 3) * 3 - arr.length;
  
for(var i = 0; i < arr.length + empty; i++) {
  i % 3 === 0 && (tr = $('<tr>').appendTo(table));
  
  tr.append('<td>' + (i < arr.length ? arr[i].name : 'empty') + '</td>');
}

$('#here_table').append(table);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="here_table"></div>

Answer 2

使用模数运算符%

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 str =  "<table>";
for(var i in arr){
  if(i%3==0)
    str +=  "<tr>";
  str +=  "<td>"+arr[i].name+"</td>";
  if((i+1)%3==0)
    str +=  "</tr>";  
  
}
str +=  "</table>";
document.querySelector("#here_table").innerHTML = str;

tr td{
  width:10%;
}

<div id="here_table">
    
</div>

Answer 3

只需创建一个 JavaScript函数即可创建该表

在这里，我使用jQuery库来附加元素，但你也可以直接使用JavaScript来添加元素。

// Object Array
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" }
];

// Generating the table creation HTML code
function createTable(array) {
  var tableString = "<table border='1'><tr>";
  var numOfCells = Math.ceil(arr.length / 3)*3;
  for (var i = 0; i < numOfCells; i++) {
    if (array[i]) {
      tableString += "<td>" + array[i].name + "</td>";
    } else {
      tableString += "<td>Empty</td>";
    }
    if ((i + 1) % 3 === 0) {
      tableString += "</tr><tr>";
    }
  }
  tableString += "</tr></table>";
  return tableString;
}

// Appending that DOM element to the div 'here_table'
$('#here_table').append(createTable(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=here_table></div>

使用3列动态创建表

3 个答案: