asp.net javascript looping through table elements
Please see the below code: I am have a table row defined using asp.net and it is hidden. when the user click on add attribute button , it calls the java script function and a call is made to clone that row. Because java script is cloning that row there is no ID. Now when the user presses the get val button on the button. I want it loop through the whole table and get the Name (dropdown list) val , comparison val and value val may be with a comma separated string which I can later parse. How can I get those values???
<%@ 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">
开发者_如何学Go </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>
Try this:
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;
});
At the end of iterations you will have the values for each row seperated by a ":" and with a "," for the same row.
加载中,请稍侯......
精彩评论