woorkup features the top jquery plugins of 2009
http://woorkup.com/2009/12/27/10-popular-jquery-plugins-in-2009-you-can%E2%80%99t-miss/
jquery dynamically update table rows data
Filed Under (jquery) by admin on 01-12-2008
Tagged Under : jquery
To dynamically change the table rows use this smart approach using jquery
Assign your new table data rows to a variable
var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>";
Delete the exsiting rows except for the header tr:first – represents first row of the table – which happens to be our header
$("table tr:first").siblings().remove();
Then add the new data, the msg javascript variable used here holds the new table rows data
$("table tr:first").after(msg);
I have a very detailed step by step tutorial you can view here
A jquery plugin that creates a multiple column selectbox
Donwload plugin at: http://code.google.com/p/jquerymulticolumnselectbox/
Directions for Use:
1. Include of course jquery.js and jquery.multicolselect.js
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.multicolselect.js”></script>
<script type=”text/javascript” src=”jquery.multicolselect.js”></script>
2. Create a table put an id to the div “ex. datatable”
<div id=”datatable”>
<table cellspacing=”0″ width=”100%”>
<tr>
<th>ID</th><th>Key</th><th>Fruit</th>
</tr>
<tr>
<td>1</td><td>1234</td><td>Apple</td>
</tr>
<tr>
<td>2</td><td>1111</td><td>Cat</td>
</tr>
<tr>
<td>3</td><td>5555</td><td>Dog</td>
</tr>
</table>
</div>
<table cellspacing=”0″ width=”100%”>
<tr>
<th>ID</th><th>Key</th><th>Fruit</th>
</tr>
<tr>
<td>1</td><td>1234</td><td>Apple</td>
</tr>
<tr>
<td>2</td><td>1111</td><td>Cat</td>
</tr>
<tr>
<td>3</td><td>5555</td><td>Dog</td>
</tr>
</table>
</div>
3. Run the plugin using this command
$("#datatable").multicolselect({
buttonImage:"selectbutton.gif",
valueCol:1,
hideCol:0
});
4 . Note you need the “selectbutton.gif” so save it.
5. Then your done.
Options
| buttonImage | The source of your button image | |
| valueCol | The column index to be used to display value for the textbox | |
| hideCol | The column index to hide this is usually an id column |
