在GRIDVIEW底部增加一空行.方案一经采用，另开贴再送100分！说到做到！

需求：
1.一个GRIDVIEW，有多列！其中有三列是：身份证号，工号，姓名。这三列都是模板列，放有TEXTBOX。2.查询出的员工信息显示在这个GRIDVIEW中，3.在表格外面，有个按钮“增加一行”。点击此按钮，就在GRIDVIEW底部出现一空行！4.在空行的列：身份证号，工号，姓名的文本框中，可以输入信息，例如输入工号，则根据工号带出员工信息。实现要求：
1.添加空行要求只刷新表格！不刷新整个页面！另外：我用JS实现过，就是获取页面上的表格，再添加一个<TR>...</TR>. 获取员工信息，也是采用JS。但其维护性，可扩展性不好！因为，如果要求在某列前再添加一列信息，那么之前定义的obj.rows[i].cells[j]都变了！都得改！太烦了!
所以特此发贴，高分求行之有效的方法！谢谢！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我做了一个.
不是用js的,
我是在服务器端做的,然后用updatePanel包住gridview就可以不刷屏了.
具体方法:1.点击"增加一行"按钮,回到服务器端,将gridview的数据读入datatable,然后datatable增加一行,不填数据,然后重新绑定到gridview.搞掂.
简单的做法:
设置GridView1的ShowFooter为true
在GridView的FooterRow中添加TextBox或Label和按钮!无刷新:简单的用UpdatePanel
gridview本身不就有"添加"功能么,点击后出现新行.
var newTr = getElementById("[tableName]").insertRow();
var newTd0 = newTr.insertCell();
....
为什么新增数据要在GRIDVIEW底部增加一空行？你怎样动态增加js验证？如果有日期控件，你怎样加上去？
就算加上去也麻烦。你可以将添加数据的界面放在一个div里面。点击新增的时候就把它显示，
保存的时候就隐藏掉。再重新调用绑定数据的方法
不刷新整个页面可以加一个updatepanel
这种方法貌似可行！我呆会试试！但是会不会也出现：如何实现输入工号带出员工信息呢？如果将新增的员工信息保存到服务器的问题。对于使用FooterRow的方法，我也不了解FooterRow。如果可以，请指点一二！
确实！我也想过用此方法！但因为列很多！不可能做成标准的信息录入界面！只能放在一个表格中！
你这种方法也可以在DIV中放一个同员工信息表格一样的表格，这个DIV表格只有一空行！但这样做和在现有表格底部添加一空行有何异呢？
在GridView底部添加一行,用FooterRow来做是标准做法,(老外的书上)
好象也没特别好的方法!!
你可以在FooterRow中添加任何东西!就像模板列,事实上就是模板列!!
你可以用一个在下面放一个div层,层里放你一列，，用jquery根据你在div层里textbox输入的值查询出新的结果，重新绑定gridview（jquery的ajax）
js 可以实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">  <script>
function addTR(id){
var tb=document.getElementById(id);
if(tb&&tb.rows[0]){
var tr=tb.rows[0].cloneNode(true);     var els=tr.getElementsByTagName('input'); for(var i=0,len=els.length;i<len;i++){
if(els[i].type=='text'){
els[i].value='';
}
} tb.rows[0].parentNode.appendChild(tr);
}
}
window.onload=function(){
document.getElementById('btn1').onclick=function(){addTR('tb1');}
document.getElementById('btn2').onclick=function(){addTR('tb2');}
}
    </script>
</HEAD> <BODY>
  我是Table1
  <table id='tb1'>
  <tr>
<td><input type='text' value='1' /></td>  <td><input type='text' value='2' /></td>
    </tr>
  <tr>
  <td><input type='text' value='11' /></td>  <td><input type='text' value='22' /></td>
    </tr>
  </table>
    我是Table2
  <table id='tb2'>
  <tr>
  <td><input type='text' value='1' /></td>  <td><input type='text' value='2' /></td><td><input type='text' value='3' /></td>  <td><input type='text' value='4' /></td>
    </tr>
  <tr>
  <td><input type='text' value='11' /></td>  <td><input type='text' value='22' /></td>  <td><input type='text' value='33' /></td>  <td><input type='text' value='44' /></td>
    </tr>
  </table>
<input type='button' id='btn1' value='为Table1增加一行' />
<input type='button' id='btn2' value='为Table2增加一行' /> </BODY>
</HTML>
var row=document.getElementById("tab").insertRow();
var cell1=row.insertCell();
cell1.innerHTML=" <input type='text' id='txt'>";
为什么不使用ListView呢？那一个控件就可以代替好几个asp.net2.0中控件，而且这类空行都有现成的Templete给你设计好了。
一直在忙于其它事情，没来得及试验！
我决定先试试这个方法！
但使用FootTemplate后，还能显示统计吗？哈
本来FootTemplate中是放有统计值的！谢谢！！！试了之后，我再把结果告诉大家！
obj.rows[i].cells[j]
你可以定义一个funtion
按列名返回"j"
function ReturnRowObj(ObjName, Row, Dg)//返回要选择列名的列号
{
    //ObjName 列名
    //Row     哪一行
    //Dg      在哪个table上
    var ObjCells = -1;
    var LenC = Dg.rows[Row].cells.length;
    for (var i = 0; i < LenC; i++) {
        if (Dg.rows[Row].cells[i].firstChild.id == ObjName) {
            ObjCells = i;
            break;
        }
    }
    return ObjCells;
}
同意你的观点。另外，用Footer的话，如果要增加两个以上怎么办？
哦哦!!还加上统计!!这倒没做过!!
不过FootTemplate是模板列,一个模板列完全可加n个控件,
唯一需要设置处理的是什么情况下不显示,什么情况下显示
obj.rows[i].cells[j]
你可以定义一个funtion
按列名返回"j"
function ReturnRowObj(ObjName, Row, Dg)//返回要选择列名的列号
{
//ObjName 列名
//Row 哪一行
//Dg 在哪个table上
var ObjCells = -1;
var LenC = Dg.rows[Row].cells.length;
for (var i = 0; i < LenC; i++) {
if (Dg.rows[Row].cells[i].firstChild.id == ObjName) {
ObjCells = i;
break;
}
}
return ObjCells;
}用法:
var Grid=document.getElementById('Dg_PO');
Grid.rows[2].cells[ReturnRowObj("数量", 2, Grid)].firstChild.value
//返回'Dg_PO'的第2行'数量'所在的列的第一个控制值
使用FOOTROW试了一下，发现我的显示，隐藏FOOTROW按钮非得点击两次才有效！
显示的就是设置SHOWFOOTER = TRUE，隐藏的代码就是SHOWFOOTER=FALSE；
为啥非要点击两次！谢谢！！！
啥问题？window.onload还是page_load?
能说具体点吗
你可以新件一个页面测试!
以消除你对
GridView1.ShowFooter = true;
或
GridView1.ShowFooter = false;
的怀疑!!
注意,如果是代码绑定的话,不要忘了执行以上语句后,数据要绑定!!
你的意思是说执行GridView1.ShowFooter = true后，要写数据绑定语句？
如：
(info是一个ILIST，放在VIEWSTATE里)this.dg.datasource = this.info;
this.dg.databind();但是为什么我单独测试，又不会呢！哈这一步我先跳过！继续试验下面的操作！
为什么不用ListVIEW呢，这是很好的东西啊！<asp:ListView ID="ListView1" runat="server" DataKeyNames="PK_TYPE_ID"
                   InsertItemPosition="LastItem"
DataSourceID="SqlDataSource2"
                    >
                    <ItemTemplate>
                        <tr style="border:1px solid #eee">

                            <td style="border:1px solid #eee; width:25%">
                                <asp:Label ID="PK_TYPE_IDLabel" runat="server"
                                    Text='<%# Eval("PK_TYPE_ID") %>' />
                            </td>
                            <td style="border:1px solid #eee; width:50%;">
                                <asp:Label ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' />
                            </td>

                         <td style="border:1px solid #eee; width:25%">
                             <asp:LinkButton ID="EditButton" runat="server" CommandName="Edit">编辑</asp:LinkButton>  &nbsp
                       <%--      <asp:Button ID="" runat="server" CommandName="Edit" Text="" CssClass="ImgBtn"/>
                                <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" OnClientClick="return confirm('您确认删除该记录吗？')" Text="删除" CssClass="ImgBtn"/>--%>
                            <asp:LinkButton ID="DeleteButton" runat="server" CommandName="Delete" OnClientClick="return confirm('您确认删除该记录吗？')">删除</asp:LinkButton>
                            </td>
                        </tr>
                    </ItemTemplate>

                    <EmptyDataTemplate>
                        <table runat="server" style="">
                            <tr>
                                <td>
                                    未返回数据。</td>
                            </tr>
                        </table>
                    </EmptyDataTemplate>
                    <InsertItemTemplate>
                        <tr style="">

                            <td style="border:1px solid #eee;width:25%">
                                <asp:Label ID="PK_TYPE_IDTextBox" runat="server"
                                    Text="此处自动生成" />
                            </td>
                            <td style="border:1px solid #eee;width:50%">
                                <asp:TextBox ID="NAMETextBox"  MaxLength="15" runat="server" Text='<%# Bind("NAME") %>'  Width="90%"  style="word-wrap: break-word; word-break: break-all;"/>
                            </td>

                            <td style="border:1px solid #eee;width:25%">
                                <asp:LinkButton ID="InsertButton" runat="server" CommandName="Insert">插入</asp:LinkButton>  &nbsp
                                <asp:LinkButton ID="CancelButton" runat="server"  CommandName="Cancel" >清除</asp:LinkButton>
                             <%--   <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" CssClass="ImgBtn"/>
                                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" CssClass="ImgBtn"/>--%>
                            </td>
                        </tr>
                    </InsertItemTemplate>
                    <LayoutTemplate>
                        <table runat="server"  width="80%">
                            <tr runat="server" style="border:1px solid #eee">
                                <td runat="server" style="border:1px solid #eee">
                                    <table ID="itemPlaceholderContainer" runat="server" border="1" width="100%" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif; border:1px solid #eee">
                                        <tr runat="server" style="border:1px solid #eee">

                                            <th runat="server" style="border:1px solid #eee">
                                                类别ID</th>
                                            <th runat="server" style="border:1px solid #eee">
                                                类别名称</th>

                                                <th id="Th1" runat="server" style="border:1px solid #eee">
                                                操作
                                            </th>
                                        </tr>
                                        <tr ID="itemPlaceholder" runat="server">
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                        </table>
                    </LayoutTemplate>
                    <EditItemTemplate>
                        <tr style="border:1px solid #eee">

                            <td style="border:1px solid #eee;width:25%">
                                <asp:Label ID="PK_TYPE_IDLabel1" runat="server"
                                    Text='<%# Eval("PK_TYPE_ID") %>' />
                            </td>
                            <td style="border:1px solid #eee;width:50%">
                                <asp:TextBox ID="NAMETextBox" runat="server"  MaxLength="15" Text='<%# Bind("NAME") %>'  style="word-wrap: break-word; word-break: break-all;"   Width="90%"/>
                            </td>
                       <td style="border:1px solid #eee;width:25%">
                           <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Update">更新</asp:LinkButton>  &nbsp
                           <asp:LinkButton ID="CancelButton" runat="server" CommandName="Cancel">取消</asp:LinkButton>
                               <%-- <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" CssClass="ImgBtn"/>
                                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" CssClass="ImgBtn"/>--%>
                            </td>
                        </tr>
                    </EditItemTemplate>

                </asp:ListView>
非常感谢楼上的朋友提供LISTVIEW这个方法！
我会尝试用一下！但是，由于我们现在系统里用的都是我们包装好了的GRIDVIEW，我这次算是属于重构一下！
暂时系统里不准备使用LISTVIEW，但如果LISTVIEW在添加空行方便如何便捷，将不排除往后的需求中引进。
我总结一下各位的方案:
1.使用JS写表格行对象的HTML.
评价:这种方法脚本代码量大,可维护性,可扩展性差!
2.使用GRIDVIEW的FOOTROW.
评价:这种方法适用于表格中的多列需要输入信息.实现起来有小小复杂,特别是如果还有多列统计列!
3.使用LISTVIEW数据控件
评价:据说这种方法很方便添加新行,但我没试过
4.使用DIV将要输入的信息列示成标签和输入控件.在DIV中输入的数据再绑定到GRIDVIEW中.
评价:这种方法适用于大部分的场景,实现简单,方便,快捷!一般其要求表格中需求可输入列在少量.我现在是采用了第四种方法! 第四种方法加上AJAX的局部刷新技术,可以达到很好的效果! 谢谢!!!
这一贴给谈及到这四种方法中的朋友加分!第四种方法首先提出来的是"zzxap",请"zzxap"进我的另一贴领取100分!贴子名称为:"GRIDVIEW添加空行最佳实践加分贴"再次谢谢各位朋友的帮忙!