Html 如何基于Dart中的表及其行填充列表?
我想根据HTML表填充对象列表。假设我有以下课程:Html 如何基于Dart中的表及其行填充列表?,html,list,html-table,dart,Html,List,Html Table,Dart,我想根据HTML表填充对象列表。假设我有以下课程: class Employee { String name; String department; num salary; ...methods } 在我的HTML中,我有下表: <table class="table" id="employeeTable"> <thead> <tr> <th>Name <th>Departament
class Employee
{
String name;
String department;
num salary;
...methods
}
在我的HTML中,我有下表:
<table class="table" id="employeeTable">
<thead>
<tr>
<th>Name
<th>Departament
<th>Salary
<tbody id="employeeTableBody">
<tr>
<td> John
<td> 1
<td> 1500
<tr>
<td> Mary
<td> 2
<td> 2500
...etc
</table>
但是我在TableElement或Element中找不到合适的方法来返回TableRowElement,或者返回它的单元格。我也试图获得子节点,但没有成功
完成此任务的伪算法如下所示:
1. Get the table
2. For each row of the table
2.a Create a new Employee object based on the value of each cell of the row.
2.b Append this object to the Employee List.
3. End
以下是HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scratchweb</title>
<link rel="stylesheet" href="scratchweb.css">
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Departament</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>1500</td>
</tr>
<tr>
<td>Mary</td>
<td>2</td>
<td>2500</td>
</tr>
</table>
<script type="application/dart" src="web/scratchweb.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Scratchweb
名称
部门
薪水
约翰
1.
1500
玛丽
2.
2500
这是飞镖:
import 'dart:html';
import 'dart:math';
class Employee {
String name;
String department;
num salary;
Employee({this.name, this.department, this.salary});
String toString() => '<employee name="$name" department="$department" salary="$salary">';
}
void main() {
var employees = new List<Employee>();
var table = query("table#employeeTable");
for (TableRowElement row in table.rows) {
if (row.cells.length != 3) {
print("Malformed row: $row");
continue;
}
if ((row.cells[0] as TableCellElement).tagName == "TH") {
print("Skipping header");
continue;
}
var cells = row.cells;
var employee = new Employee(
name: cells[0].text,
department: cells[1].text,
salary: parseDouble(cells[2].text));
employees.add(employee);
}
print(employees);
}
导入'dart:html';
导入“dart:math”;
班级员工{
字符串名;
弦乐部;
num工资;
员工({this.name,this.department,this.salary});
字符串toString()=>“”;
}
void main(){
var employees=新列表();
var table=query(“表#employeeTable”);
for(table.rows中的TableRowElement行){
if(row.cells.length!=3){
打印(“格式错误的行:$row”);
继续;
}
if((作为TableCellElement的行单元格[0])。标记名==“TH”){
打印(“跳过标题”);
继续;
}
变量单元格=行单元格;
var employee=新员工(
名称:单元格[0]。文本,
部门:单元格[1]。文本,
工资:双精度(单元格[2].text));
employees.add(employees);
}
印刷品(雇员);
}
如果你同意这个答案,请记住接受它。每次我成功地回答一个问题,老板都会给我一片培根;) 这很有魅力。你应该得到一整块培根。我还编辑了您的帖子,将var声明更改为object-declarrion。我认为它使代码更易于阅读和理解。如果你不同意,就把版本翻回去:PAnd它也帮我找到了这个。很好,但是我们需要在那里做“作为TableCellElement”吗?是的,否则你会得到一个轻微的警告。
import 'dart:html';
import 'dart:math';
class Employee {
String name;
String department;
num salary;
Employee({this.name, this.department, this.salary});
String toString() => '<employee name="$name" department="$department" salary="$salary">';
}
void main() {
var employees = new List<Employee>();
var table = query("table#employeeTable");
for (TableRowElement row in table.rows) {
if (row.cells.length != 3) {
print("Malformed row: $row");
continue;
}
if ((row.cells[0] as TableCellElement).tagName == "TH") {
print("Skipping header");
continue;
}
var cells = row.cells;
var employee = new Employee(
name: cells[0].text,
department: cells[1].text,
salary: parseDouble(cells[2].text));
employees.add(employee);
}
print(employees);
}