Samples
In this page you will find a collection of samples showing how to configure the ezEditTable script.
- Table 1: call the script
- Table 2: enable cell selection only
- Table 3: enable multiple rows selection (click + ctrl or shift key) and define selection's starting row
- Table 4: disable key navigation and key selection (ctrl and shift key for multiple selection), enable multiple selection (click selection)
- Table 5: select a row at start and use callback event functions before and after a row is selected
- Table 6: enable default inline cell editing, double-click on a cell to display cell editor
- Table 7: define editor type by column, double-click or use F2, enter or spacebar keys to display editor
- Table 8: use the script's public methods and properties to change features programmatically or to retrieve information
- Table 9: enable a command type column editor
Here you have a regular HTML table:
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
Below the same table enhanced by the ezEditTable script:
TABLE 1
Call the script
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var et1 = setEditTable("table1"); </script>Top of page
TABLE 2
Enable cell selection only
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table2_Config = { default_selection:'cell' }; var et2 = setEditTable("table2", table2_Config); </script>Top of page
TABLE 3
Enable multiple rows selection (click + ctrl or shift key) and define selection's starting row
Group 1 | Group 2 | Group 3 | ||
---|---|---|---|---|
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table3_Config = { selection_model: 'multiple' }; var et3 = setEditTable( "table3",table3_Config,3 ); </script>Top of page
TABLE 4
Disable key navigation and key selection, enable multiple selection (click selection)
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> table4_Config = { key_navigation: false, key_selection: false, selection_model: 'multiple' }; var et4 = setEditTable("table4", table4_Config); </script>Top of page
TABLE 5
Select a row at start and use callback event functions before (on_before_selected_row
)
and after (on_after_selected_row
) a row is selected
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table5_Config = { select_row_at_start: true, row_index_at_start: 1, on_before_selected_row: function(o, row){ o.Get('output1').innerHTML = 'Active row: '+row.rowIndex.toString() +' '; }, on_after_selected_row: function(o, row){ o.Get('output2').innerHTML = 'Active row data:' + o.Selection.GetRowValues(row); }, }; var et5 = setEditTable("table5", table5_Config); </script>Top of page
TABLE 6
Enable default inline cell editing, double-click on a cell to display cell editor
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table6_Config = { editable: true, auto_save: false, default_selection: 'both' }; var et6 = setEditTable("table6", table6_Config); </script>Top of page
TABLE 7
Define editor type by column, double-click or use F2, enter or spacebar keys to display editor
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table7_Config = { editable: true, auto_save: false, default_selection: 'both', cell_editors:[ { type: 'select', attributes:[['title','Choose a continent']] }, { type: 'input', css:'alignRight' }, { type: 'textarea', style:'background-color: yellow;' }, { type: 'input', attributes:[['maxLength',5],['title','5 chars max']] }, { type: 'none' } ] }; var et7 = setEditTable('table7', table7_Config); </script>Top of page
TABLE 8
Use the script's public methods and properties to change features programmatically or to retrieve information
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World |
---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> var table8_Config = { editable: true, auto_save: false }; var et8 = setEditTable("table8", table8_Config); </script> <!-- buttons code below --> <input type="button" value="Is selectable?" onClick="alert( et8.IsSelectable() );" /> <input type="button" value="Is editable?" onClick="alert( et8.IsEditable() );" /> <input type="button" value="Clear selections" onClick="et8.ClearSelections();" /> <input type="button" value="Disable edition" onClick="et8.Editable.Remove();" /> <input type="button" value="Enable edition" onClick="et8.Editable.Set();" /> <input type="button" value="Disable selection" onClick="et8.Selection.Remove();" /> <input type="button" value="Enable selection" onClick="et8.Selection.Set();" /> <input type="button" value="Enable multiple selection" onClick="et8.selectionModel = 'multiple';" /> <input type="button" value="Disable multiple selection" onClick="et8.selectionModel = 'single';" /> <input type="button" value="Enable cell selection" onClick="et8.ClearSelections(); et8.defaultSelection = 'cell';" /> <input type="button" value="Disable cell selection" onClick="et8.ClearSelections(); et8.defaultSelection = 'row';" /> <input type="button" value="Enable row editor" onClick="et8.editorModel = 'row';" /> <input type="button" value="Disable row editor" onClick="et8.Editable.CloseRowEditor(); et8.editorModel = 'cell';" /> <input type="button" value="Get active row values" onClick="alert(et8.Selection.GetActiveRowValues());" /> <input type="button" value="Get selected rows values" onClick="alert(et8.Selection.GetSelectedValues());" />Top of page
TABLE 9
Enable a command type column editor
World Regions | Population ( 2007 Est.) | Population % of World | % Population ( Penetration ) | Usage % of World | Action |
---|---|---|---|---|---|
Africa | 933,448,292 | 14.2 % | 3.5 % | 3.0 % | |
Asia | 3,712,527,624 | 56.5 % | 10.5 % | 35.6 % | |
Europe | 809,624,686 | 12.3 % | 38.6 % | 28.6 % | |
Middle East | 193,452,727 | 2.9 % | 10.0 % | 1.8 % | |
North America | 334,538,018 | 5.1 % | 69.4 % | 21.2 % | |
Latin America / Caribbean | 556,606,627 | 8.5 % | 16.0 % | 8.1 % | |
Oceania / Australia | 34,468,443 | 0.5 % | 53.5 % | 1.7 % |
<script language="javascript" type="text/javascript"> //<![CDATA[ var table9_Config = { editable: true, auto_save: false, cell_editors:[ { type: 'select', attributes:[['title','Choose a continent']] }, { type: 'input', css:'alignRight' }, { type: 'textarea', style:'background-color: yellow;' }, { type: 'input', attributes:[['maxLength',5],['title','5 chars max']] }, { type: 'input' }, { type: 'command', buttons:{ enable: ['update', 'insert', 'delete', 'submit', 'cancel'], 'update': { title:'Edit row' }, 'insert': { title:'Add row' }, 'delete': { title:'Delete row' }, 'submit': { text:'Save', title:'Save' }, 'cancel': { text:'Cancel', title:'Cancel' } } } ] }; var et9 = setEditTable("table9", table9_Config); //]]> </script>Top of page