<tr class="dummyrow">DynTable_AddRow() and DynTable_AddRow() at your leisure| row | name | ||
|---|---|---|---|
| _xx_ | |||
<script type="text/javascript" language="javascript" src="dynamictables.js"></script>
<link rel="Stylesheet" media="all" href="dynamictables.css">
<script type="text/javascript">
function RowAdded(tr,rowNum){
var msg="Hey, I just added a row!\n";
msg+="Its rowNumber is "+rowNum+" and its innerHTML is\n"+tr.innerHTML;
alert(msg);
}
function ConfirmAdd(){ return confirm('Are you sure you want to add a row?') }
function ConfirmDelete(){ return confirm('Really delete this row?') }
</script>
<table cellspacing="0" class="dynamic growable deletable"
onbeforeaddrow="ConfirmAdd" onaddrow="RowAdded"
onbeforedeleterow="ConfirmDelete" ondeleterow=""
maxlines="5" autoincrement="true" nextlinenum="100" hidedeletedrows="true" addrowonload="true">
<thead><tr><th>row</th><th>name</th><th>email</th><th></th></tr></thead>
<tr class="dummyrow">
<td>_xx_<input type="hidden" name="linenumber" value="_xx_"></td>
<td><input type="text" name="name_xx_" id="name_xx_"></td>
<td><input type="text" name="email_xx_" id="email_xx_"></td>
<td><button onclick="DynTable_DeleteRow(this)">delete</button></td>
</tr>
</table>| <table class="dynamic" | required | Initiates dynamic handling for table |
DynTable_AddRow(...) |
optional | Call this function to add a new row to the table, passing it a reference to the table or one of its descendants. (If called from an event fired by a descendant of the table, no parameter need by passed.) |
DynTable_DeleteRow(...) |
optional | Call this function to add a new row to the table, passing it a reference to the tr to be deleted, or one of its descendants. (If called from an event fired by a descendant of the tr, no parameter need by passed.) |
| <table class="... growable" | optional | Indicates that table may have rows added to it. (Currently this option is not enforced, i.e. DynTable_AddRow() will succeed without the 'growable' class.) |
| <tr class="dummyrow" | - | A row with this class is required for growable tables. This row will not be shown, but will be used as the basis for each new blank row added. |
| <table class="... deleteable" | optional | Indicates that table may have rows deleted. (Currently this option is not enforced, i.e. DynTable_DeleteRow() will succeed without the 'deleteable' class.) |
| <table class="... autogrow" | optional | Not yet implemented. When all the form elements in the last row with the attribute required="true" have valid values, a new line will be automatically added to the table. |
| <table maxlines="10" | optional | DynTable_AddRow() will refuse (silently) to add any more rows if the number of visible rows meets or exceeds this number |
| <table hidedeletedrows="true" | optional | By default, DynTable_DeleteRow() will remove the TR node (and its children) completely. If 'hidedeletedrows' is set to true, it will instead use display:none to hide the row, which enables you have a hidden input in the row still submitted with the form with instructions to delete the row. |
| <table autoincrement="true" | optional | When a new line is added, all occurences of '_xx_' inside each TD's innerHTML are replaced with an auto-incrementing line number (see 'nextlinenum' below). |
| <table addrowonload="true" | optional | Automatically adds a new blank row (without calling the onbeforeaddrow or onaddrow functions) to the table onload. |
| <table nextlinenum="100" | optional | If 'autoincrement' is true (above), determines the starting number for the first new line added. If not present, autoincrement will start at the number of rows in the table originally. |
| <table onbeforerowadd="MyFunctionName" | optional | The function name supplied will be called before a row is added, and passed a reference to the table object. If this function returns 'false', the new row will not be added. |
| <table onrowadd="MyFunctionName" | optional | The function name supplied will be called after a row is added, and passed a reference to the new tr object. If autoincrement is true, the row number will be passed as a second parameter. A reference to the parent table is passed as a third parameter. |
| <table onbeforerowdelete="MyFunctionName" | optional | The function name supplied will be called before a row is deleted, and passed a reference to the tr object (and if autoincrement is true, the row number will be passed as a second parameter). If this function returns 'false', the new row will not be deleted. |
| <table onrowdelete="MyFunctionName" | optional | The function name supplied will be called after a row is deleted. If 'hidedeletedrows' is not true, a reference to the parent table will be passed as the only parameter. If 'hidedeletedrows' is true, this function it will be passed a reference to the old tr object as the first parameter, if autoincrement is true the row number will be passed as a second parameter, and a reference to the parent table will be passed as the third parameter. |
The following example code shows how to add a hidden input to each line which will have the values "insert", "update", "delete", or "" to tell your processing page how to handle the line. This allows the user to see a kajillion lines editable at once, add 3, delete 2, change 1, and have your processing page only change the appropriate records.
function RowDelete(tr,rowNum){ document.getElementById('action'+rowNum).value='delete' }
...
<table class="dynamic" hidedeletedrows='true' onrowdelete="RowDelete" autoincrement="true" nextlinenum="11">
<tr>
<td>
<input type="hidden" name="action" id="action10" value="">
<input type="text" name="email" onchange="document.getElementById('action10').value='update'">
<button onclick="DynTable_DeleteRow(this)">delete</button>
</td>
</tr>
<tr class="dummyrow">
<td>
<input type="text" name="email">
<input type="hidden" name="action" id="action_xx_" value="insert">
<button onclick="DynTable_DeleteRow(this)">delete</button>
</td>
</tr>
</table>
Copyright ©2002-2003 Gavin Kistner