Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

110 lines (103 sloc) 3.702 kB
<style>
table {
width: 100%;
border: 1px solid #bbb;
}
table thead th {
text-align: left;
white-space: nowrap;
padding: 0px 6px;
border: 1px solid #b2b2b2;
border-width: 0px 1px 1px 0px;
height: 16px !important;
line-height: 16px !important;
font-size: 12px;
font-weight: normal;
overflow: hidden;
}
table th:last-child {
border-right: none;
}
table td {
white-space: nowrap;
padding: 0px 8px;
height: 20px;
line-height: 20px;
background: #fff;
border: none;
}
table tr.table-tr-odd td {
background: #f3f3f3;
}
table tr:nth-child(odd) td {
background: #f3f3f3;
}
table tr:hover > td, table tr.table-tr-hovered td {
background-color: #d4e7f8;
color: #000;
cursor: pointer;
}
table tr.selected td, table tr.table-tr-selected td, table tr.selected td a, table tr.table-tr-selected td a {
background-color: #3875d7;
color: #fff;
}
</style>
<p>
You should be able to select rows in the table below. Holding down shift and clicking on numerous rows should behave as you would expect, selecting and deselecting multiple rows. Keyboard support should also allow you to move up and down and select rows with space or enter. Hitting shift + space or enter should select multiple rows.
</p>
<div id="table1"></div>
<p>
The table below is not multi-selectable. You can hold shift and use the arrows or click, but it will only ever select one row.
</p>
<div id="table2"></div>
<!-- no html -->
<script src="/depender/build?require=More/HtmlTable.Select"></script>
<script>
var data = [
{"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geolat":52.3789,"geolong":4.90067},
{"id":46,"timezone":"America/New_York","name":"Atlanta","geolat":33.7525,"geolong":-84.3888},
{"id":42,"timezone":"America/Chicago","name":"Austin","geolat":30.2669,"geolong":-97.7428},
{"id":63,"timezone":"America/New_York","name":"Baltimore","geolat":39.294255,"geolong":-76.614275},
{"id":24,"timezone":"America/New_York","name":"Boston","geolat":42.3583,"geolong":-71.0603},
{"id":32,"timezone":"America/Chicago","name":"Chicago","geolat":41.8858,"geolong":-87.6181},
{"id":64,"timezone":"America/New_York","name":"Cleveland","geolat":41.499819,"geolong":-81.693716},
{"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geolat":32.7887,"geolong":-96.7676},
{"id":25,"timezone":"America/Denver","name":"Denver","geolat":39.734,"geolong":-105.026},
{"id":47,"timezone":"America/New_York","name":"Detroit","geolat":42.3333,"geolong":-83.0484},
{"id":48,"timezone":"America/Chicago","name":"Houston","geolat":29.7594,"geolong":-95.3594},
{"id":66,"timezone":"America/New_York","name":"Indianapolis","geolat":39.767016,"geolong":-86.156255},
{"id":65,"timezone":"America/Chicago","name":"Kansas City","geolat":39.090431,"geolong":-94.583644},
{"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geolat":36.1721,"geolong":-115.122}
];
var myArray = data.map(function(item){
return [item.id, item.name, item.timezone, item.geolat, item.geolong];
});
var myTable = new HtmlTable({
shiftForMultiSelect: true,
properties : {
border : 1,
cellspacing : 0,
cellpadding : 5
},
rows : myArray,
headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
sortable : true,
selectable: true,
parsers : ['number', 'string', 'string', 'float', 'float']
});
$(myTable).inject($('table1'));
var myTable2 = new HtmlTable({
properties : {
border : 1,
cellspacing : 0,
cellpadding : 5
},
rows : myArray,
headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
sortable : true,
selectable: true,
allowMultiSelect: false,
parsers : ['number', 'string', 'string', 'float', 'float']
});
$(myTable2).inject($('table2'));
</script>
Jump to Line
Something went wrong with that request. Please try again.