<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table: Column Toggle - jQuery Mobile Demos</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="table-wrapper"><table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke ui-table ui-table-columntoggle">
<thead>
<tr>
<th data-priority="2" data-colstart="1" class="ui-table-priority-2">Rank</th>
<th data-colstart="2">Movie Title</th>
<th data-priority="3" data-colstart="3" class="ui-table-priority-3">Year</th>
<th data-priority="1" data-colstart="4" class="ui-table-priority-1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5" data-colstart="5" class="ui-table-priority-5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th class="ui-table-priority-2">1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external" class="ui-link">Citizen Kane</a></td>
<td class="ui-table-priority-3">1941</td>
<td class="ui-table-priority-1">100%</td>
<td class="ui-table-priority-5">74</td>
</tr>
<tr>
<th class="ui-table-priority-2">2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external" class="ui-link">Casablanca</a></td>
<td class="ui-table-priority-3">1942</td>
<td class="ui-table-priority-1">97%</td>
<td class="ui-table-priority-5">64</td>
</tr>
<tr>
<th class="ui-table-priority-2">3</th>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external" class="ui-link">The Godfather</a></td>
<td class="ui-table-priority-3">1972</td>
<td class="ui-table-priority-1">97%</td>
<td class="ui-table-priority-5">87</td>
</tr>
<tr>
<th class="ui-table-priority-2">7</th>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external" class="ui-link">The Graduate</a></td>
<td class="ui-table-priority-3">1967</td>
<td class="ui-table-priority-1">91%</td>
<td class="ui-table-priority-5">122</td>
</tr>
<tr>
<th class="ui-table-priority-2">8</th>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external" class="ui-link">The Wizard of Oz</a></td>
<td class="ui-table-priority-3">1939</td>
<td class="ui-table-priority-1">90%</td>
<td class="ui-table-priority-5">72</td>
</tr>
<tr>
<th class="ui-table-priority-2">9</th>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external" class="ui-link">Singin' in the Rain</a></td>
<td class="ui-table-priority-3">1952</td>
<td class="ui-table-priority-1">89%</td>
<td class="ui-table-priority-5">85</td>
</tr>
<tr>
<th class="ui-table-priority-2">10</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external" class="ui-link">Inception</a></td>
<td class="ui-table-priority-3">2010</td>
<td class="ui-table-priority-1">84%</td>
<td class="ui-table-priority-5">78</td>
</tr>
</tbody>
</table></div>
</body>
</html>
Try our Online jQuery Mobile Editor (Version jQueryMobile (1.4.5)) Write and Edit, Run, and Share your Jquerymobile Code online directly from your browser. This Online Compiler provides you the comfort to edit and compile your Jquerymobile code using latest version jQueryMobile (1.4.5)
How to use our Online jQuery Mobile Editor?
Write and Execute Code
- Write your program (or, paste it) directly under the "Source Code" tab.
- If you want to save your program, go to the "Project" menu and save it.
- You can directly execute your program without saving it and just by clicking on "Execute" button.
How to Enter User Input?
The latest version of our Online jQuery Mobile Editor allows to provide program input at run time from the terminal window exactly the same way as you run your program at your own computer. So simply run a program and provide your program input (if any) from the terminal window available in the right side.
Keyboard Shortcuts
The following are the keyword shortcut of our editor:
| Shortcut | Description |
|---|---|
| ⌘ + Enter | Run the program |
| ⌘ + G | Share Project |
| ⌘ + Z | Undo Editing |
| ⌘ + Y | Redo Editing |
| ⌘ + A | Select All Text |
| ⌘ + X | Cut Selected Text |
| ⌘ + C | Copy Selected Text |
| ⌘ + V | Paste Copied Text |
| ⌘ + F | Search Text |
| ⌘ + ⌥ + F | Replace Text |
| Shortcut | Description |
|---|---|
| Ctrl + Enter | Run the program |
| Ctrl + G | Share Project |
| Ctrl + Z | Undo Editing |
| Ctrl + Y | Redo Editing |
| Ctrl + A | Select All Text |
| Ctrl + X | Cut Selected Text |
| Ctrl + C | Copy Selected Text |
| Ctrl + V | Paste Copied Text |
| Ctrl + F | Search Text |
| Ctrl + H | Replace Text |
Share Your Jquerymobile Project Online
You can use this feature to share your Jquerymobile Code with your teachers, classmates and colleagues. Just click Share Button and it will create a short link, which can be shared through Email, WhatsApp or even through Social Media. A shared link will be deleted if it has been passive for almost 3 months.
More Features of the Editor
- Theme – You can change the current editor's theme from the "Editor Theme" option under "Settings" menu.
- Font Size – You can change the font size of the editor/compiler from the "Font Size" option under "Settings" menu.
- Tab Size – You can change the tab size from the "Tab Size" option under "Settings" Menu.
- Show/Hide Line Numbers – You can show/hide the line number with the code from the "Show Line Numbers" or "Hide Line Numbers" option under "Settings" Menu.
- And, many more.