Question

我正在建立一个由两行组成的表格。第一行包含图像，第二行包含相关文本。

直到现在我才意识到我需要拥有＆＃34; max column＆＃34;每排某种。

然而，我无法想到实现这个变量max的方法（我尝试了一堆，就像一个while循环，就像跟踪到目前为止完成的计数一样）。

var max = 5 //needs to be flexible
var tr = document.createElement("tr");

for (var i = 0; i < this.structures.length; i++){ //image row
    var td = document.createElement("td");
    var img = new Image()
        td.appendChild(img);            
    tr.appendChild(td);
}
table.appendChild(tr);


var tr = document.createElement("tr");

for (var i = 0; i < this.structures.length; i++){ // text row
    var td = document.createElement("td");
        td.innerHTML = "bla"
}
table.appendChild(tr);

有人可以提供建议吗？

Answer 1

如果你说你实际上想要超过两行来保存大于最大值的图像，那么每次i的值可以被你的最大值整除时，只需再创建两行。

此外，使用单独的tbody元素可能是一个好主意，因为您正在创建可能需要提取的分组。

var structures = [
   {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}];

var max = 5;
var table = document.querySelector("#t");
var tbody, tr1, tr2;

for (var i = 0; i < structures.length; i++) {
  if (i % max === 0) {
    tbody = table.appendChild(document.createElement("tbody"));
    tr1 = tbody.insertRow(-1);
    tr2 = tbody.insertRow(-1);
  }
  tr1.insertCell(-1).appendChild(new Image()).src = structures[i].src;
  tr2.insertCell(-1).textContent = i + ": " + structures[i].text;
}

<table id=t></table>

Answer 2

以下是根据内容

的需要向表中添加行的示例

我使用了数组row_set

var row_set = [];它存储表的所有行。

在for循环中，我调用了一个函数getRows()，它给我一个包含两行的数组来添加数据。

getRows如下所示

它需要两个参数current和row。

current是当前索引，max是最大值。

function getRows(current,max){
  if(current%max === 0){
    row_set.push(table.insertRow(-1));
    row_set.push(table.insertRow(-1));
  }

  return row_set;
}

如果current除以max，则返回两个新闻行的数组，否则返回最后一行数。

现在，弹出两行并添加数据。

tr2= rows.pop();
tr1= rows.pop();

将数据添加到表后，推送row_set数组中最后使用的行。

rows.push(tr1);
rows.push(tr2);

＆＃13;

var structures = [
   {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}];

var max = 5;
var table = document.querySelector("#t");
var tr1, tr2;
  
var row_set = [];

for (var i = 0; i < structures.length; i++){
  
  var rows = getRows(i,max);
  
  tr2= rows.pop();
  tr1= rows.pop();
  
  tr1.appendChild(document.createElement("td"))
     .appendChild(new Image())
     .src = structures[i].src;
  
  tr2.appendChild(document.createElement("td"))
     .textContent = structures[i].text;
  
  rows.push(tr1);
  rows.push(tr2);
}



function getRows(current,max){
  if(current%max === 0){
    row_set.push(table.insertRow(-1));
    row_set.push(table.insertRow(-1));
  }
  
  return row_set;
}

＆＃13;

<table id=t></table>

＆＃13;

在多行上建立一个表，同时保持TD的数量有限？

2 个答案: