通过表元素循环的asp.net javascript

时间:2010-12-29 19:23:07

标签: javascript jquery

请参阅下面的代码:我有一个使用asp.net定义的表格行,它是隐藏的。当用户点击添加属性按​​钮时,它会调用java脚本函数并调用该行来克隆该行。因为java脚本正在克隆该行,所以没有ID。现在,当用户按下按钮上的get val按钮时。我希望它遍历整个表并获取Name(下拉列表)val,比较val和值val可以使用逗号分隔的字符串,我可以在以后解析。我怎样才能获得这些价值?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Imaging_BoxSearch" %>  
<!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>Untitled Page</title>
        <style type="text/css">
        #TemplateRow 
        { 
            display:none; 
        }

        #TemplateDocRow 
        { 
            display:none; 
        }
        </style>
         <script src='../JS/jquery-1.3.2.min.js' type="text/javascript"></script>
        <script type="text/javascript">
        $(function() {
                $('#btn_addattr').click(function() {
                  alert("test123");
                  var $newRow = $('#TemplateRow').clone(true);
                  $newRow.find('*').andSelf().removeAttr('id');
                  $('#tbl_boxattr tr:last').before($newRow);
                  return false;
            });
        });

           $(function() {
    $("[id$=btn_getval]").click(function() {

        alert("Get Values");

           return false;
    });
    return false;
});

    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>        
            <center>
                <table>
                    <tr>
                        <td> 
                            Client
                        </td>
                        <td>
                            <asp:TextBox  ID="txt_Client" runat="server"  Width="100px"></asp:TextBox>
                        </td>
                        <td> 
                            Box ID 
                        </td>
                        <td>
                            <asp:TextBox  ID="txt_BoxID" runat="server"  Width="100px"></asp:TextBox> 
                        </td>
                        <td>
                             Location 
                        </td>
                        <td>
                            <asp:TextBox  ID="txt_Location" runat="server"  Width="100px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        <asp:Panel ID="pnl_Attr" runat="server">
                        <table id="tbl_attr">
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Comparision
                                </th>
                                <th>
                                    Value
                                </th>
                                <th>
                                    Delete
                                </th>
                            </tr>
                            <tr id="TemplateRow">
                                <td>
                                    <asp:DropDownList ID="ddl_AttrName" runat="server"> 
                                    </asp:DropDownList>
                                </td>
                                <td>
                                    <asp:DropDownList ID="ddl_AttrComparision" runat="server">
                                        <asp:ListItem Value="=" Selected="true"></asp:ListItem>
                                        <asp:ListItem Value=">"></asp:ListItem>
                                        <asp:ListItem Value="<"></asp:ListItem>
                                        <asp:ListItem Value="Like"></asp:ListItem>
                                        <asp:ListItem Value="!="></asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                                <td>
                                   <asp:TextBox ID="txt_val" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
                                </td>
                            </tr>
                        </table>
                         <asp:Button ID="btn_addattr" Text="Add Attribute" runat="server" />
                        </asp:Panel>
                        </td>                                        
                    </tr>                   
                        </table>                            
                        </asp:Panel>
                        </td>                                        
                    </tr>
                </table>
                <asp:Button ID="btn_getval" runat="Server" Text="Get Val" />
            </center>
            </div>
        </form>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

试试这个:

var selectedValues = "";

 $("[id$=btn_getval]").click(function() {          
    selectedValues = "";
    $('#tbl_boxattr tr').each(function() {
        var tRow = $(this);
        var atrName = $("select:first-child", tRow).text()
        var atrCompare = $("select:second-child", tRow).text()
        var txtVal = $("input[type='text']", tRow).text()
        selectedValues += ":" + atrName + "," + atrCompare + "," + txtVal + ":"
    }
 );
    return false;     
 });    

在迭代结束时,您将使用“:”分隔每行的值,并为同一行分配“,”。