asp.net javascript循环遍历表格元素答案

【问题标题】：asp.net javascript looping through table elementsasp.net javascript循环遍历表格元素
【发布时间】：2010-12-29 19:23:07
【问题描述】：

请看下面的代码：我有一个使用 asp.net 定义的表格行，它是隐藏的。当用户单击添加属性按钮时，它会调用 java 脚本函数并调用以克隆该行。因为 java 脚本正在克隆该行，所以没有 ID。现在，当用户按下按钮上的 get val 按钮时。我希望它遍历整个表并获取名称（下拉列表） 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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个：

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;     
 });

在迭代结束时，每行的值将由“:”分隔，同一行用“,”分隔。

【讨论】：