Tutorial
Creating simple table from simple data
var data = [[1, "red", "10C"], [2, "green", "50F"], [3, "blue", "273K"]];
cs_set("example1div",
cs_table(
data.collect( function( v, i ){
return cs_tr(
v.collect( function(e,i) {
return cs_td( cs_text( e ) );
})
)
})
)
);
| 1 | red | 10C |
| 2 | green | 50F |
| 3 | blue | 273K |
Adding table headers and attributes
cs_set("example2div",
cs_table([
cs_thead(
cs_tr([
cs_td("#", {bgcolor: "#FF9999"}),
cs_td("color", {bgcolor: "#99FF99"}),
cs_td("temperature", {bgcolor: "#9999FF"}),
])
),
cs_tbody(
data.collect( function( v, i ){
return cs_tr(
v.collect( function( e, i ) {
return cs_td( cs_text( e ) );
})
)
})
)], {border: 1})
);
| # | color | temperature |
| 1 | red | 10C |
| 2 | green | 50F |
| 3 | blue | 273K |
Lets make it clickable
Just click on the cells
cs_set("example3div",
cs_table([
cs_thead(
cs_tr([
cs_td("#", {bgcolor: "#FF9999"}),
cs_td("color", {bgcolor: "#99FF99"}),
cs_td("temperature", {bgcolor: "#9999FF"}),
])
),
cs_tbody(
data.collect( function( v, i ){
return cs_tr(
v.collect( function( e, i ) {
return cs_td( cs_text( e ),{
events: {
onclick: function(){alert(e)}
}
});
})
)
})
)], {border: 1})
);
| # | color | temperature |
| 1 | red | 10C |
| 2 | green | 50F |
| 3 | blue | 273K |
Lets add style
cs_set("example4div",
cs_table([
cs_thead(
cs_tr([
cs_td("#", {bgcolor: "#FF9999"}),
cs_td("color", {bgcolor: "#99FF99"}),
cs_td("temperature", {bgcolor: "#9999FF"}),
])
),
cs_tbody(
data.collect( function( v, i ){
return cs_tr(
v.collect( function( e, i ) {
return cs_td( cs_text( e ),{
events: {
onclick: function(){alert(e)}
},
style: {
backgroundColor: v[1]
}
});
})
)
})
)], {border: 1})
);
| # | color | temperature |
| 1 | red | 10C |
| 2 | green | 50F |
| 3 | blue | 273K |
Almost lisp. That's all folks! Any other things are up to you. If you want to say, to contribute, to fix or just to joke - welcome to HTMLCS@SourceForge!
