Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: DataTable Control (beta): Adding and Deleting Rows

# DataTable Control (beta): Adding and Deleting Rows

Adding and deleting rows dynamically.

View example in new window.

## Sample Code for this Example

Data:

CSS:

#buttons {margin-bottom: 1em;}

Markup:

<div id="buttons"> <span id="addrow" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Add one row</button> </span> </span> <span id="deleterow" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Delete top row</button> </span> </span> <span id="addrows" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Add 20 rows</button> </span> </span> <span id="deleterows" class="yui-button yui-push-button"> <span class="first-child"> <button type="button" name="button5">Delete top 20 rows</button> </span> </span> </div> <div id="basic"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.DynamicData = new function() { var data = {one:"one",two:"two",three:"three"}; var myColumnDefs = [ {key:"row",resizeable:true,sortable:true}, {key:"one",resizeable:true}, {key:"two",resizeable:true}, {key:"three",resizeable:true} ]; this.myDataSource = new YAHOO.util.DataSource([]); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["one","two","three"] }; this.myDataTable = new YAHOO.widget.DataTable("basic", myColumnDefs, this.myDataSource, {}); var i=1; YAHOO.util.Event.addListener("addrow","click",function() { var record = YAHOO.widget.DataTable._cloneObject(data); record.row = i++; this.myDataTable.addRow(record); },this,true); YAHOO.util.Event.addListener("deleterow","click",function() { if(this.myDataTable.getRecordSet().getLength() > 0) { this.myDataTable.deleteRow(0); } },this,true); YAHOO.util.Event.addListener("addrows","click",function(e) { var myArray = []; for(var l=i;i<=l+19;i++) { var record = YAHOO.widget.DataTable._cloneObject(data); record.row = i; myArray.push(record); } this.myDataTable.addRows(myArray); },this,true); YAHOO.util.Event.addListener("deleterows","click",function() { var length = this.myDataTable.getRecordSet().getLength(); if(length > 0) { var count = (length > 19) ? 20 : length; this.myDataTable.deleteRows(0,count); } },this,true); new YAHOO.widget.Button("addrow"); new YAHOO.widget.Button("addrows"); new YAHOO.widget.Button("deleterow"); new YAHOO.widget.Button("deleterows"); }; });

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator
- Complex Application (included with examples for Layout Manager (beta))

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings