Generate tds outside each input field in dart - dart

Question

This is my first question on stackoverflow and i'm totally newbie to dartlang.
I have 8 input fields which i created using this:
InputElement in1 = new InputElement();
in1.placeholder = "№";
InputElement in2 = new InputElement();
in2.placeholder = "Name";
...
InputElement in8 = new InputElement();
in8.placeholder = "Date";
And i couldn't figure out how to automatically generate row with tds containing those input fields. If i create it manually my code would look like this:
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);
I don't wanna create it manually cuz i need to do it on other tables with different columns. And the reason i'm creating these input field is to create filtering.
Pls don't suggest innerHtml, appendHtml cuz i have to create it with purely dart code.
I think it's possible to do by making list and using loop but i don't know how. Pls help me!

Answer 1

I'm not sure if I understand your question correctly but I assume this is what you want.
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);
example with more attributes (not tested)
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);
If your element creation logic becomes more complicated I would create a function/method for this
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;
}