遇到一各用JS操作Grid的問題,與大家一起分享.這個例子同樣適用於Table,應為在前臺的HTML頁,Grid就是一個Table.

一.前臺代碼(Default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    EnableEventValidation="false" %>
<html>
<head runat="server">
    <title>JS操作Grid</title>
    <script language="javascript" src="Default.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server" method="post">
        <asp:DataGrid ID="grdlist" CssClass="td" runat="server" AutoGenerateColumns="False"
            Width="100%">
            <Columns>
                <asp:BoundColumn DataField="No" HeaderText="序號"></asp:BoundColumn>
                <!-- 添加模板列,主要用於放置各種控件-->
                <asp:TemplateColumn HeaderText="選取">
                    <ItemTemplate>
                        <asp:CheckBox runat="server" ID="chkData" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="按鈕">
                    <ItemTemplate>
                        <asp:Button ID="btnInsert" runat="server" Text="新增" OnClientClick=" return insertRow()" />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:BoundColumn DataField="Note" HeaderText="備註"></asp:BoundColumn>
            </Columns>
        </asp:DataGrid>
    </form>
</body>
</html>

二.後臺代碼(Default.aspx.vb)

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
           //用來給GRID添加初始數據
            DataTable dt = new DataTable();
            dt.Columns.Add("No");
            dt.Columns.Add("Note");
            DataRow NewRows = dt.NewRow();
            NewRows["No"] = "1";
            NewRows["Note"] = "測試範例(不可刪除)";
            dt.Rows.Add(NewRows);
            this.grdlist.DataSource = dt;
            this.grdlist.DataBind();
    }
}

三.javascript(Default.js)

//grdlist是Grid名稱,也可是表格名稱

//新增一行
function insertRow()
{
var nRow=document.all.grdlist.rows.length; //表格的總行數
var objTheRow=document.all.grdlist.insertRow(nRow);//在最下邊新增一行

//以下是要增加的內容
objTheRow.insertCell(0).innerText=nRow;
objTheRow.insertCell(1).innerHTML="<input type='checkbox' disabled='disabled' >";
objTheRow.insertCell(2).innerHTML="<input type='button' value='刪除' onClick='deleteCurrentRow()' > ";
objTheRow.insertCell(3).innerText='可刪除';
return false;
}

//刪除當前行
function deleteCurrentRow()
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; //取當前行的rowIndex
document.all.grdlist.deleteRow(currRowIndex); //刪除
}