Question

这是我关于stackoverflow的第一个问题，我对dartlang来说是新手。

我有8个输入字段，我使用它创建：

InputElement in1 = new InputElement();
 in1.placeholder = "№";
InputElement in2 = new InputElement();
 in2.placeholder = "Name";
... 
InputElement in8 = new InputElement();
 in8.placeholder = "Date";

我无法弄清楚如何使用包含这些输入字段的tds自动生成行。如果我手动创建它，我的代码将如下所示：

InputElement in1 = new InputElement();
 in1.placeholder = "№";
TableCellElement cell1 = new Element.td();
 cell1.nodes.add(in1);
InputElement in2 = new InputElement();
 in2.placeholder = "Name";
TableCellElement cell2 = new Element.td();
 cell2.nodes.add(in2);
InputElement in3 = new InputElement();
 in3.placeholder = "LastName";
TableCellElement cell3 = new Element.td();
 cell3.nodes.add(in3);
InputElement in4 = new InputElement();
 in4.placeholder = "Register No";
TableCellElement cell4 = new Element.td();
 cell4.nodes.add(in4);
InputElement in5 = new InputElement();
 in5.placeholder = "University";
TableCellElement cell5 = new Element.td();
 cell5.nodes.add(in5);
InputElement in6 = new InputElement();
 in6.placeholder = "Occupation";
TableCellElement cell6 = new Element.td();
 cell6.nodes.add(in6);
InputElement in7 = new InputElement();
 in7.placeholder = "Grade";
TableCellElement cell7 = new Element.td();
 cell7.nodes.add(in7);
InputElement in8 = new InputElement();
 in8.placeholder = "Date";
TableCellElement cell8 = new Element.td();
 cell8.nodes.add(in8);

  TableRowElement tr1 = new Element.tr();
  tr1.classes.add("table-header-student");

  tr1.nodes.add(cell1);
  tr1.nodes.add(cell2);
  tr1.nodes.add(cell3);
  tr1.nodes.add(cell4);
  tr1.nodes.add(cell5);
  tr1.nodes.add(cell6);
  tr1.nodes.add(cell7);
  tr1.nodes.add(cell8);

我不想手动创建它，因为我需要在具有不同列的其他表上执行此操作。我创建这些输入字段的原因是创建过滤。请不要建议innerHtml，appendHtml因为我必须使用纯粹的dart代码创建它。我认为可以通过制作列表和使用循环来做，但我不知道如何。请帮助我！

Answer 1

我不确定我是否理解你的问题，但我认为这就是你想要的。

List<String> placeholders = ['№', 'Name', 'LastName', 'Register No', 'University', 'Occupation', 'Grade', 'Date'];

TableRowElement tr = new Element.tr()
    ..classes.add("table-header-student");

placeholders.forEach((ph) {
  tr.append(new TableCellElement()..append(new InputElement()..placeholder = ph));
});

querySelector('table').append(tr);

具有更多属性（未测试）的示例

List<String> fields = [
  {'placeholder': '№', 'id': 'id1', 'name': 'name1'}, 
  {'placeholder': 'Name', 'id': 'id2', 'name': 'name2'}, 
  {'placeholder': 'LastName', 'id': 'id3', 'name': 'name3'}, 
  {'placeholder': 'Register No', 'id': 'id4', 'name': 'name4'}, 
  {'placeholder': 'University', 'id': 'id5', 'name': 'name5'}, 
  {'placeholder': 'Occupation', 'id': 'id6', 'name': 'name6'}, 
  {'placeholder': 'Grade', 'id': 'id7', 'name': 'name7'}, 
  {'placeholder': 'Date', 'id': 'id8', 'name': 'name8'}];

TableRowElement tr = new Element.tr()
    ..classes.add("table-header-student");

fields.forEach((f) {
  tr.append(new TableCellElement()..append(
      new InputElement()
          ..placeholder = f['placeholder']
          ..id = f['id']
          ..name = f['name']
  ));
});

querySelector('table').append(tr);

如果你的元素创建逻辑变得更复杂，我会为这个

创建一个函数/方法

main() {
  List<String> fields = [
    {'placeholder': '№', 'id': 'id1', 'name': 'name1'}, 
    {'placeholder': 'Name', 'id': 'id2', 'name': 'name2'}, 
    {'placeholder': 'LastName', 'id': 'id3', 'name': 'name3'}, 
    {'placeholder': 'Register No', 'id': 'id4', 'name': 'name4'}, 
    {'placeholder': 'University', 'id': 'id5', 'name': 'name5'}, 
    {'placeholder': 'Occupation', 'id': 'id6', 'name': 'name6'}, 
    {'placeholder': 'Grade', 'id': 'id7', 'name': 'name7'}, 
    {'placeholder': 'Date', 'id': 'id8', 'name': 'name8'}];

  TableRowElement tr = new Element.tr()
      ..classes.add("table-header-student");

  fields.forEach((f) {
    tr.append(new TableCellElement()..append(createInputElement(f));
  });

  querySelector('table').append(tr);
}

InputElement createInputElement(Map metadata) {
  var ie = new InputElement();
  if(metadata['placeholder'] != null) ie.placeholder = metadata['placeholder'];
  if(metadata['id'] != null) ie.id = metadata['id'];
  if(metadata['name'] != null) ie.name = metadata['name'];
  // ... more element customization
  return ie;
}

在dart中的每个输入字段外生成tds

1 个答案: