Question

Okay, this is so frustrating now. I have a GridView with 9 columns. I have 3 of them showing and I want to have a seperate table that shows the other 6 when I click on the row. I have my javascript function set up to put in my selected row into a new table when I click it… except it doesn’t work!

<script type="text/javascript">
    var table = $('<table></table>');
    var grid = document.getElementById('<%=BillabilityView.ID %>'); // here it is inputting gridview.
    $(document).ready(function () {
        $(".tbl tr:has(td)").css({ background: "ffffff" }).click(
             function () {
                 var row = $('<tr></tr>').addClass('bar').text(grid.rows[$(this).index()]); // here it is saying 'unable to get the value of property rows'
                 table.append(row);
                 $('#please').append(table);
             }
        );
    }); 
</script> 

It is just not putting the gridview into my var! Even when I just do a check for grid.rows.length it doesn’t understand rows. I am looking at other code samples and they do the same thing I’m doing and they say that it works fine. I am 100% sure that it is selecting my GridView. What is going on?

EDIT: Here is the asp.net side of it:

<asp:GridView ID="BillabilityView" BackColor="White" runat="server" AutoGenerateColumns="false" CssClass="tbl">
                <columns> 
                   <asp:boundfield datafield="UserName" headertext="User Name" /> 
                   <asp:boundfield datafield="UserID" headertext="User ID" /> 
                   <asp:boundfield datafield="HrsTLB" headertext="Billable Hours" /> 
                   <asp:boundfield datafield="HrsTLNB" headertext="Nonbillable Hours" /> 
                   <asp:boundfield datafield="HrsTL" headertext="Total Hours" /> 
                   <asp:boundfield datafield="HrsExp" headertext="Expected Hours" /> 
                   <asp:boundfield datafield="Billability" headertext="Billability" />

                </columns>
            </asp:GridView>
            <div id = "please">
            </div>

Heck we’ll even throw the c# in it for kicks

BillabilityView.DataSource = dataList.retBillability();
BillabilityView.DataBind();
BillabilityView.RowDataBound += new GridViewRowEventHandler(BillabilityView_RowDataBound);

    void BillabilityView_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            e.Row.BackColor = Color.FromName("#ebebeb");
        }
        //e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink
         //   (this.BillabilityView, "Select$" + e.Row.RowIndex);
    }

Answer 1

Please change the lines below

var grid = document.getElementById('<%=BillabilityView.ID %>');
$(document).ready(function () {

To this way

$(document).ready(function () {
  var grid = $("#BillabilityView");

PS: For consistency sake please use jquery to getElementById instead of document.getElementById