.Net friendly: How to Extract data from html table and list using Jquery map function

According to wikipedia.org, map is the name of a higher-order function that applies a given function element-wise to a list of elements and returns a list of results. So it let you to transform the items of a list by applying a given function to each item and returning the list of results.
Jquery API map()

<%@ Page Language="C#" AutoEventWireup="true" 
               CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            var a = $('#tbl tr').map(function () {
                var $row = $(this);
                return {
                    Num: $row.find(':nth-child(1)').text(),
                    Name: $row.find(':nth-child(2)').text()
                };
            }).get();

            alert(a[0].Num);
            alert(a[0].Name);
            //----------------------------------------------------------
            var str = $('#list :checkbox').map(function () {
                return this.id + '-' + $(this).attr('checked');
            }).get().join(',');

            alert(str);
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tbl">
                <tr>
                    <td>111</td>
                    <td>row1</td>
                </tr>
                <tr>
                    <td>222</td>
                    <td>row2</td>
                </tr>
                <tr>
                    <td>333</td>
                    <td>row3</td>
                </tr>
        </table>

        <ul id="list">
            <li><input type="checkbox" id="ch1" checked="checked" /></li>
            <li><input type="checkbox" id="ch2" /></li>
            <li><input type="checkbox" id="ch3" checked="checked" /></li>
        </ul>
    </div>
    </form>
</body>
</html>

1 comments:

Carly Fiorina said...: Hello all,

Extracting data from remote sources can be challenging. From a developer's standpoint, data is stored by certain computer and software applications and thus, may not be accessible by third-party tools due to security reasons. Thanks a lot......

Web Scrape; June 21, 2011 at 1:03 PM

.Net friendly

Wednesday, April 13, 2011

How to Extract data from html table and list using Jquery map function

1 comments:

Post a Comment