如何在javascript中使用克隆行的确切行数

时间:2015-08-12 13:02:37

标签: javascript asp.net

我在我的Asp.net项目中使用像这样的

创建了GridView的克隆行
function CreateGrid() {
            var Grid = document.getElementById('<%=GridView1.ClientID%>')
            for (var i = 1; i < 6; i++) {
                var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
                newrow.cells[0].innerText;
                newrow.cells[1].children[0].value = '';
                newrow.cells[2].children[0].value = '';
                Grid.appendChild(newrow);
            }
        }

这是我的GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" 
            CellPadding="4">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
                <asp:TemplateField HeaderText="Text1">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" onclick="GetRowIndex(this)"></asp:TextBox>
                </ItemTemplate>
                </asp:TemplateField>
                  <asp:TemplateField HeaderText="Text2">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <RowStyle BackColor="White" ForeColor="#330099" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <SortedAscendingCellStyle BackColor="#FEFCEB" />
            <SortedAscendingHeaderStyle BackColor="#AF0101" />
            <SortedDescendingCellStyle BackColor="#F6F0C0" />
            <SortedDescendingHeaderStyle BackColor="#7E0000" />
        </asp:GridView>

我希望当我点击任何一个单元格时它会给我一个确切的行号,让我们说当我点击第三行的单元格时它返回3.所以我写了这个函数

function GetRowIndex(node) {
            var row = node.parentNode.parentNode;
            alert(row.rowIndex);
        }

但是当我点击任何一行而不是第一行时,它总是返回-1
请帮帮我们

1 个答案:

答案 0 :(得分:1)

我测试你的代码,它在IE8和Firefox(开发人员版)中运行良好,但它在Chrome中不起作用。

您的Grid.appendChild(newrow);会将行添加到<table>元素,但您应该将行添加到<body>元素即可。

奇怪的是它在第一个和第二个浏览器中工作正常,但在第三个浏览器中没有。

所以,只需改变这个

Grid.appendChild(newrow);

到这个

Grid.getElementsByTagName('tbody')[0].appendChild(newrow);

现在,您要将行添加到正文中的行