Create an HTML table: Difference between revisions
(J) |
(Added Oz.) |
||
| Line 62: | Line 62: | ||
<script>fill(document.getElementById("x"));</script> |
<script>fill(document.getElementById("x"));</script> |
||
</body></html></lang> |
</body></html></lang> |
||
=={{header|Oz}}== |
|||
As a complete web application, using the [https://github.com/wmeyer/roads/wiki "Roads"] web programming library. Connect your browser to http://localhost:8080/table after starting the program. |
|||
<lang oz>declare |
|||
[Roads] = {Module.link ['x-ozlib://wmeyer/roads/Roads.ozf']} |
|||
fun {Table Session} |
|||
html( |
|||
head(title("Show a table with row and column headings") |
|||
style(type:"text/css" |
|||
css(td 'text-align':center) |
|||
)) |
|||
body( |
|||
{TagFromList table |
|||
tr(th th("X") th("Y") th("Z")) |
|||
| |
|||
{CreateRows 3 5} |
|||
})) |
|||
end |
|||
fun {CreateRows NumCols NumRows} |
|||
{List.map {List.number 1 NumRows 1} |
|||
fun {$ Row} |
|||
{TagFromList tr |
|||
td( {Int.toString Row} ) |
|||
| |
|||
{List.map {List.number 1 NumCols 1} |
|||
fun {$ Col} |
|||
SequentialNumber = (Row-1)*NumCols + Col |
|||
in |
|||
td( {Int.toString SequentialNumber} ) |
|||
end |
|||
}} |
|||
end |
|||
} |
|||
end |
|||
TagFromList = List.toTuple |
|||
in |
|||
{Roads.registerFunction table Table} |
|||
{Roads.run}</lang> |
|||
=={{header|Protium}}== |
=={{header|Protium}}== |
||
Revision as of 19:48, 9 March 2011
Create an HTML table.
- The table body should have at least three rows of three columns.
- Each of these three columns should be labelled "X", "Y", and "Z".
- An extra column should be added at either the extreme left or the extreme right of the table that has no heading, but is filled with sequential row numbers.
- The rows of the "X", "Y", and "Z" columns should be filled with random or sequential integers having 4 digits or less.
- The numbers should be aligned in the same fashion for all columns.
J
We can define:
<lang j>ele=:4 :0
nm=. x-.LF
lf=. x-.nm
;('<',nm,'>') ,L:0 y ,L:0 '</',nm,'>',lf
)
hTbl=:4 :0
rows=. 'td' <@ele"1 ":&.>y
'table' ele ('tr',LF) <@ele ('th' ele x); rows
)</lang>
With these definitions:
<lang j> (;;:'X Y Z') hTbl ":&.>(i.5),.i.5 3
| X | Y | Z | |
|---|---|---|---|
| 0 | 0 | 1 | 2 |
| 1 | 3 | 4 | 5 |
| 2 | 6 | 7 | 8 |
| 3 | 9 | 10 | 11 |
| 4 | 12 | 13 | 14 |
</lang>
JavaScript
<lang html><html><head>
<title>Show a table with row and column headings</title>
<style type="text/css">
th:first-child, td { padding: 0 .5em; text-align: right; }
</style>
<script>
function fill(table) {
for (var i = 1; i <= 100; i++) {
var row = document.createElement("tr");
var hcell = document.createElement("th");
hcell.appendChild(document.createTextNode(""+i));
row.appendChild(hcell);
for (var j = 0; j < 3; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(""+Math.floor(Math.random()*10000)));
row.appendChild(cell);
}
table.appendChild(row);
}
}
</script>
</head><body>
| X | Y | Z |
|---|
<script>fill(document.getElementById("x"));</script> </body></html></lang>
Oz
As a complete web application, using the "Roads" web programming library. Connect your browser to http://localhost:8080/table after starting the program. <lang oz>declare
[Roads] = {Module.link ['x-ozlib://wmeyer/roads/Roads.ozf']}
fun {Table Session}
html(
head(title("Show a table with row and column headings")
style(type:"text/css" css(td 'text-align':center) ))
body(
{TagFromList table tr(th th("X") th("Y") th("Z")) | {CreateRows 3 5} })) end
fun {CreateRows NumCols NumRows}
{List.map {List.number 1 NumRows 1}
fun {$ Row}
{TagFromList tr
td( {Int.toString Row} ) | {List.map {List.number 1 NumCols 1} fun {$ Col} SequentialNumber = (Row-1)*NumCols + Col in td( {Int.toString SequentialNumber} ) end }}
end }
end
TagFromList = List.toTuple
in
{Roads.registerFunction table Table} {Roads.run}</lang>
Protium
Opcodes of interest: SDC -- simple document; R!I -- ranged random integer
<lang html><@ SDCLIT> <@ DTBLIT> <@ DTRLITLIT> <@ DTDLITLIT>|[style]background-color:white</@> <@ DTD>X</@> <@ DTD>Y</@> <@ DTD>Z</@>|[style]width:100%; background-color:brown;color:white; text-align:center</@> <@ ITEFORLIT>10| <@ DTRLITCAP> <@ DTDPOSFORLIT>...|[style]background-color:Brown; color:white; text-align:right</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> <@ DTDCAPLIT><@ SAYR!ILI2>1|9999</@>|[style]width:50;text-align:right</@> |[style]background-color:white;color:black</@> </@> </@> |Number Table</@></lang>