mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-02 14:52:50 +02:00
196 lines
6.7 KiB
HTML
196 lines
6.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>ezEditTable, enhance HTML tables easily - Starter page - by Max Guglielmi</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
<meta name="description" content="ezEditTable is an open source javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation" />
|
|
<meta name="keywords" content="html table editing, html table inline cell editing, inline cell editor, row selection, script, javascript" />
|
|
<meta name="author" content="Max Guglielmi" />
|
|
|
|
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
<script src="../ezEditTable.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Starter</h1>
|
|
<p>
|
|
<a href="index.html">← Documentation</a>
|
|
</p>
|
|
<div>
|
|
<table id="demo" cellspacing="0" cellpadding="0">
|
|
<thead>
|
|
<tr>
|
|
<th>From</th>
|
|
<th>Destination</th>
|
|
<th>Road Distance (km)</th>
|
|
<th>By Air (hrs)</th>
|
|
<th width="15%">By Rail (hrs)</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Adelaide</td>
|
|
<td>1412</td>
|
|
<td>1.4</td>
|
|
|
|
<td>25.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Brisbane</td>
|
|
<td>982</td>
|
|
<td>1.5</td>
|
|
|
|
<td>16</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Canberra</td>
|
|
<td>286</td>
|
|
<td>.6</td>
|
|
|
|
<td>4.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Melbourne</td>
|
|
<td>872</td>
|
|
<td>1.1</td>
|
|
|
|
<td>10.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Perth</td>
|
|
<td>2781</td>
|
|
<td>3.1</td>
|
|
|
|
<td>38</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Alice Springs</td>
|
|
<td>1533</td>
|
|
<td>2</td>
|
|
|
|
<td>20.25</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Brisbane</td>
|
|
<td>2045</td>
|
|
<td>2.15</td>
|
|
|
|
<td>40</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
var config = {
|
|
selection: true,
|
|
default_selection: 'both'
|
|
};
|
|
var et = new EditTable('demo', config);
|
|
et.Init();
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Source code of the page:</h4>
|
|
<pre>
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>ezEditTable, enhance HTML tables easily - Starter page - by Max Guglielmi</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
|
|
<link href="../ezEditTable.css" rel="stylesheet" type="text/css">
|
|
<script src="../ezEditTable.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>ezEditTable Starter</h1>
|
|
|
|
<table id="demo" cellspacing="0" cellpadding="0">
|
|
<thead>
|
|
<tr>
|
|
<th>From</th>
|
|
<th>Destination</th>
|
|
<th>Road Distance (km)</th>
|
|
<th>By Air (hrs)</th>
|
|
<th width="15%">By Rail (hrs)</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Adelaide</td>
|
|
<td>1412</td>
|
|
<td>1.4</td>
|
|
<td>25.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Brisbane</td>
|
|
<td>982</td>
|
|
<td>1.5</td>
|
|
<td>16</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Canberra</td>
|
|
<td>286</td>
|
|
<td>.6</td>
|
|
<td>4.3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Sydney</strong></td>
|
|
<td>Melbourne</td>
|
|
<td>872</td>
|
|
<td>1.1</td>
|
|
<td>10.5</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Perth</td>
|
|
<td>2781</td>
|
|
<td>3.1</td>
|
|
<td>38</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Alice Springs</td>
|
|
<td>1533</td>
|
|
<td>2</td>
|
|
<td>20.25</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Adelaide</strong></td>
|
|
<td>Brisbane</td>
|
|
<td>2045</td>
|
|
<td>2.15</td>
|
|
<td>40</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
var config = {
|
|
selection: true,
|
|
default_selection: 'both'
|
|
};
|
|
var et = new EditTable('demo', config);
|
|
et.Init();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
</div>
|
|
</body>
|
|
</html>
|