standupweb mootools homebrews

tested on IE Tester (IE7, IE8), Opera 10.51, Firefox 3.6.2, Safari for Windows 4.0.4

SwDynTable

download

INTRODUCTION

Needed this to do my canvas graph experiment... that I eventually won't do, cause I found so many CSS graph examples that I find it useless... See: http://html5stars.com/?p=42

Download the package, the minimum to make it work is there, js is commented and relatively simple. Have fun!

FEEDBACK:Comment on post or sign up and go to the forum section: click here

EXAMPLE

month times I washed my hair action

STEP BY STEP INSTRUCTIONS

1- Create a section in your HTML with a table and its header:

<table id='swDynTable'>
<tr>
<th>month</th>
<th>times I washed my hair</th>
<th>action</th>
</tr>
</table>

2- Insert the create row button that needs to have id='create-row':

<input id='createRow' type='button' name='createRow' value='create a row'></input>

3- copy and include the .js files (preferably right before </body>)

<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swDynTable.js"></script>

4- include this after the lines included in step 3

<script language="JavaScript">
window.addEvent('domready',function() {
var bg = new swDynTable('swDynTable');
});
</script>
- replace 'swDynTable' with the id of your table

5- (optional) Use the 'onNewRow', 'onDeleteRow', 'onMoveRow' callbacks by adapting the SwDynTable instantiation:

- replace the 3rd line of the script in step 4 by:
var bg = new swDynTable('swDynTable', {'onNewRow': function(){<YOUR_CODE>}, 'onDeleteRow': function(){<YOUR_CODE>}, 'onMoveRow': function(){<YOUR_CODE>}});
- replace <YOUR_CODE> by what you want to do when the user clicks on an item of your list item