Extracting-data-from-an-HTML-table

YUI Library JavaScript DHTML


            



    
Extracting data from an HTML table

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}






    #demo table {
        border: 1px solid #aaa;
        border-collapse: collapse;
        font-size: 80%;
    }
    #demo caption {
        margin-top: 1em;
        padding: .5ex 0;
        font-size: 130%;
        color: #369;
    }
    #demo td {
        border: 1px solid #aaa;
        padding: .5ex 1ex;
    }
    #demo th {
        background: #ccc;
        border: 1px solid #aaa;
        padding: .5ex 1ex;
    }




Extracting data from an HTML table


  DataSource supports using a table in markup as its source of truth.

This example illustrates how to create a "pass-thru" DataSource instance to leverage the DOM walking and parsing routines inside in order to extract the table's data into a JavaScript array structure.




    Extract the table data

Get Total Amount Due

Total Amount Due: (click the Extract button)

        Table in markup with data in it


                Due Date
                Account Number
                Quantity
                Amount Due




                1/23/1999
                29e8548592d8c82
                12
                $150.00


                5/19/1999
                83849
                8
                $60.00


                8/9/1999
                11348
                1
                -$34.99


                1/23/2000
                29e8548592d8c82
                10
                -$1.00


                4/28/2000
                37892857482836437378273
                123
                $33.32


                1/23/2001
                83849
                5
                -$15.00


                9/30/2001
                224747
                14
                $56.78

YAHOO.util.Event.onDOMReady(function () {
// Shortcuts
var DataSource = YAHOO.util.DataSource,
    Event = YAHOO.util.Event,
    Dom   = YAHOO.util.Dom;
YAHOO.example.data = null; // this is where the data will go
// Add a new parser to DataSource to parse numbers that are prefixed with
// currency symbols (or any other non-numeric characters)
DataSource.Parser.currency = function (cur) {
    if (YAHOO.lang.isString(cur)) {
        var neg = !cur.indexOf('-');
        cur = (neg?-1:1) * cur.slice(neg).replace(/^[^0-9.]+|,/g,'');
    } else if (!YAHOO.lang.isNumber(cur)) {
        return 0;
    }
    return cur;
};
Event.on('demo_load','click',function (e) {
    // Here's the pass-thru DataSource.  Instantiate and immediately call
    // sendRequest, passing a simple assignment function as the callback's
    // success handler
    new DataSource(Dom.get('accounts'), {
        responseType : DataSource.TYPE_HTMLTABLE,
        responseSchema : {
            // Describe the object keys each record will have and what type
            // of data to parse into the respective values
            fields : [
                { key: 'due',      parser: 'date' },
                { key: 'account' },
                { key: 'quantity', parser: 'number' },
                { key: 'amount',   parser: 'currency' } // use our new parser
            ]
        }
    }).sendRequest(null,{
        success : function (req,res) {
            YAHOO.example.data = res.results;
        }
    });

    YAHOO.log(YAHOO.lang.dump(YAHOO.example.data), "info", "example");
    // The work is done and data is populated. Update the UI to allow for
    // referencing the data structure.
    Dom.get('demo_load').disabled = true;
    Dom.get('demo_go').disabled   = false;
    Dom.get('report').innerHTML = "Table data loaded. Click Get Total Amount Due.";
});
Event.on('demo_go','click', function (e) {
    var data = YAHOO.example.data || [],
        total = 0,
        i;
    // Proof that we have a populated data object
    for (i = data.length - 1; i >= 0; --i) {
        total += data[i].amount;
    }
    Dom.get('report').innerHTML = '$' + total.toFixed(2);
});
});



yui_2.7.0b.zip( 4,431 k)