当用户单击添加框属性时,该行(即需要添加2下拉列和文本框的行)需要使用jquery动态创建上面的行(这样就没有回发帖)。用户可以根据需要添加任意数量的数据,并在单击复选框时需要删除该行。如何通过jquery实现这一目标。
<asp:Panel ID="pnl_BoxAttr" runat="server">
<table>
<tr>
<th>
Name
</th>
<th>
Comparision
</th>
<th>
Value
</th>
<th>
Delete
</th>
</tr>
<tr>
<td>
<asp:DropDownList ID="ddl_BoxName" runat="server">
<asp:ListItem Value="attr1" Selected="True"></asp:ListItem>
<asp:ListItem Value="attr2"></asp:ListItem>
<asp:ListItem Value="attr3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddl_BoxComparision" 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="btn_boxval" runat="server" ></asp:TextBox>
</td>
<td>
<asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btn_AddAttr" Text="Add Box Attribute" runat="server"/>
</td>
</tr>
</table>
</asp:Panel>
答案 0 :(得分:8)
首先,这是一个工作演示,您可以在我的答案中引用它:http://jsfiddle.net/EuyB8/。
显然,演示是使用纯HTML而不是ASP.NET,但我会尝试解决这些差异。
首先,由于您需要创建一些使用.NET控件克隆的控件,我的典型方法是创建一个隐藏的模板,然后可以使用该模板创建新的副本。因此,我会有如下行:
<tr id="TemplateRow">
<td>
<asp:DropDownList ID="ddl_BoxName" runat="server">
<asp:ListItem Value="attr1" Selected="True"></asp:ListItem>
<asp:ListItem Value="attr2"></asp:ListItem>
<asp:ListItem Value="attr3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddl_BoxComparision" 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="btn_boxval" runat="server" ></asp:TextBox>
</td>
<td>
<asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
</td>
</tr>
然后我添加一个CSS规则:
#TemplateRow { display:none; }
现在我们有一行可以用作添加新行的模板,而且模板的实际标记仍然可以由.NET生成。需要注意的是,在对表使用此方法时,模板行必须位于要附加行的表中,以确保单元格的宽度合适。
我们需要做的最后一点标记是为表提供一个ID,以便我们可以操作脚本中的行。我选择了“BoxTable”。
现在,让我们构建我们的脚本。因为您使用的是.NET,所以请记住,对于具有runat="server"
属性的任何标记,生成的ID属性与您在控件的ID字段中指定的ID属性不同。一个简单的解决方法是执行以下操作:
var myClientID = '<%= myServerID.ClientID() %>';
然后,服务器将客户端ID输出到字符串中,以便在脚本中使用。
考虑到这一点,这是我们的脚本:
var btn_AddAttr = '<%= btn_AddAttr.ClientID() %>';
$(function() {
//attach the a function to the click event of the "Add Box Attribute button that will add a new row
$('#' + btn_AddAttr).click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);
//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');
//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);
//to prevent the default behavior of submitting the form
return false;
});
//attach a remove row function to all current and future instances of the "remove row" check box
$('#DeleteBoxRow').click(function() {
//find the closest parent row and remove it
$(this).closest('tr').remove();
});
//finally, add an initial row by simulating the "Add Box Attribute" click
$('#' + btn_AddAttr).click();
});
我认为这些评论非常详尽,但有必要对几点进行简要解释:
首先,当我们克隆模板行时,我们将布尔值传递给克隆函数。这说明除了我们克隆的DOM元素之外,我们还应克隆附加到这些元素的事件处理程序,并将它们附加到新克隆。这对于“删除行”复选框起作用非常重要。
其次,当我们克隆模板行时,我们还克隆了所有元素的所有属性,包括ID。我们不希望这样,因为它违反了XHTML合规性和我的原因问题。因此,我们删除了其ID的所有克隆元素。
最后,由于您使用的是提交按钮,因此请务必记住在按钮的点击事件中返回false,以避免提交表单并导致回发。
希望这能回答你的问题。最后要记住的是,由于您使用jQuery创建所有这些行,因此服务器不会准备好接收输入值的对象。如果您需要服务器访问该信息,您必须找出向其发送该信息的方法。
答案 1 :(得分:0)
据我了解,您需要用户通过单击按钮插入一个新行(就像包含select的那一行)?
首先你需要给带有添加按钮的tr一个id,让我们说'addTr'。
对于插入,您可以执行以下操作:
$('#btn_AddAttr').bind(
'click',
function() {
$('#addTr').before( '<tr>' +
/* entre tr content here */
'</tr>'
);
}
);
确保所有下拉列表和文本框都有不同的ID。
要从表中删除行,您应该添加一个类,以帮助您识别所有删除复选框,让我们说'delChk':
$('.delChk').bind(
'click',
function() {
$(this).closest('<tr>').remove();
}
);