如何在前台的JavaScript中访问DATAGRID里的绑定列和模板列

datagrid里有两列，产品价格ProductScore和要购买的数量。datagrid有一个绑定列ProductScore和一个下拉框模板列CountDropDownList。先从服务器端取得一个值TotalScore，用TotalScore和Datagrid的每行绑定列ProductScore比较，
根据ProductScore来动态的给CountDropDownList绑定值。比如datagrid的第一行ProductScore=1000，从服务器端取出来值TotalScore=5000。那么相应的CountDropDownList就应该绑定数组{0，1，2，3，4，5}如果选择了一个CountDropDownList的值，那么datagrid里所有行的CountDropDownList都要立即做出相应的变化。请教各位达人

解决方案 »

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

没太懂,CountDropDownList改变之后,其余的CountDropDownList作出什么相应的变化呢
帮你顶
其余的CountDropDownList也要重新绑定值，因为可用的TotalScore少了。比如datagrid只有两行数据的话，TotalScore=5000。
第一行：ProductScore=1000 第二行ProductScore=2000
那么如果你将第一行的CountDropDownList选择了1，那么TotalScore=5000-1000=4000。则第二行的CountDropDownList就应该重新绑定成{0，1，2}
<%@ Page language="c#" Codebehind="WebForm10.aspx.cs" AutoEventWireup="false" Inherits="bsTest2005_8_16.WebForm10" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm10</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
function changeAmount(obj)
{

var i = 2;
var cbname = "DataGrid1__ctl"+i+"_CountDropDownList";//DataGrid里嵌套的CheckBox的id是有规律的，利用之
while(document.getElementById(cbname)!=null)
{
if(cbname!=obj.id)document.getElementById(cbname).selectedIndex=0;//这未必是lz需要的更改，只是示范

i = i+1;
cbname = "DataGrid1__ctl"+i+"_CountDropDownList";
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="field1"></asp:BoundColumn>
<asp:BoundColumn DataField="ProductScore" HeaderText="产品单价"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="购买数量">
<ItemTemplate>
<asp:DropDownList id="CountDropDownList" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>
******************************
using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data;namespace bsTest2005_8_16
{
/// <summary>
/// WebForm10 的摘要说明。
/// </summary>
    public class WebForm10 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataGrid DataGrid1;

        double TotalScore = 0;
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面

            if(!IsPostBack)
            {
                TotalScore = 10000;//从数据读取TotalScore
                BindData();
            }
        }

        private void BindData()
        {
            DataTable dt1 = new DataTable();
            dt1.Columns.Add("field1");
            dt1.Columns.Add("ProductScore");


            dt1.Rows.Add(new object[]{"AAA",1000});
            dt1.Rows.Add(new object[]{"BBB",2000});
            dt1.Rows.Add(new object[]{"CCC",3000});
            dt1.Rows.Add(new object[]{"DDD",4000});
            dt1.Rows.Add(new object[]{"EEE",5000});

            this.DataGrid1.DataSource=dt1;
            this.DataGrid1.DataBind();
        }
        private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            if(e.Item.ItemIndex>-1)
            {
                double price = Convert.ToDouble(e.Item.Cells[1].Text.Trim());
                int maxAmount = (int)Math.Floor(TotalScore/price);

                DropDownList ddlst = e.Item.Cells[2].FindControl("CountDropDownList") as DropDownList;
                ddlst.Attributes.Add("onchange","changeAmount(this);");
                for(int i=0;i<=maxAmount;i++)
                    ddlst.Items.Add(i.ToString());
            }
        }        #region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
            this.Load += new System.EventHandler(this.Page_Load);        }
        #endregion
    }
}
是比较麻烦，客户提出来的要求，原先是让客户在模板列的TEXTBOX里填写购买数量，现在客户要求改为下拉框形式，还要即时对每件商品数量的可选范围做出判断。第一个问题就是如何在前台的JS里操作Datagrid里的数据
至于lz需要实现的业务逻辑，那是有问题的，例如我上面的例子
总额是10000，五种产品的单价分别是1000~5000，
现在我在第一行选了5，那么总额就变成了10000-5000=5000，根据这个余额去控制其它行这没有问题，
接着我在第二行选择1，那么第一行的值改不改？
然后第一行我选错了，从5变成4，那么其它行又该如何变化？
第二行我也选错了，希望从1改成3，那又该如何修正，3这个选项压根就没了所以我的建议是不要搞那么复杂的联动；最后，补充一些控制dropdownlist选项的脚本示例：
//增加一个选项
var oOption = document.createElement("OPTION");
oOption.innerText = "abc";
oOption.value = 123;
document.all["DropDownList2"].options.add(oOption);

//删除第一个选项
document.all["DropDownList2"].options.remove(0);

//删除最后一个选项
document.all["DropDownList2"].options.remove(document.all["DropDownList2"].options.length-1);//更改选中行
document.all["DropDownList1"].selectedIndex = 0;
不过客户那边是要求，他们的意思是永远都以当前的TotalScore为准，即现在我在第一行选了5，那么总额就变成了10000-5000=5000，根据这个余额去控制其它行这没有问题，
接着我在第二行选择1，那么第一行的值改不改？ //不改
然后第一行我选错了，从5变成4，那么其它行又该如何变化？ //其他行按10000-4000-2000=4000来改
第二行我也选错了，希望从1改成3，那又该如何修正，3这个选项压根就没了 //向选3的话需要将其余的商品少选几个
没事做,帮你写了一下,代码没测试,可能有些bug,楼主看行的话就改下
这个可以做,首先在DataGrid1_ItemDataBound里为每一个DropDownList加一个客户端事件DropDownList.Attributes.Add("onchange","changeAmount(this);");还有商品单价放到Label控件中去在页面中写js
function changeAmount(obj)
{
  var TotalScore=<%=TotalScore%>;//取到后台TotalScore的值,要定义为public或protected
  var currentIndex = obj.id.lastIndexOf("_");
  var curretnPrice = parseInt( document.all(obj.substring(0,currentIndex) + 'DataGrid中商品单价Label的ID' ).innerText );//取到该行商品的单价
  var currentCount = paseInt( obj.value );

  //以下循环计算还剩余多少钱
  for( var i=0;i<document.Form1.elements.length;i++)
  {
     if( document.Form1.elements[i].type == "select" && document.Form1.elements[i].id.substring(0,8)=='DataGrid1')//元素是select并且在DataGrid中
     {
        if( document.Form1.elements[i].id == obj.id )//如果是当前的select则跳过
continue; var index = document.Form1.elements[i].id.lastIndexOf("_");
var price = parseInt( document.all(document.Form1.elements[i].substring(0,currentIndex) + 'DataGrid中商品单价Label的ID' ).innerText );//取到该行商品的单价 if( document.Form1.elements[i].selectedIndex != 0 )//选择的数量不为0
{
var count = paseInt(document.Form1.elements[i].value);
TotalScore = TotalScore - price*count;
}
     }
     TotalScore = TotalScore- currentPrice*currentCount;
  }  //以下循环计算每一个dropdownlist还可以选多少个
  for( var i=0;i<document.Form1.elements.length;i++)
{
    var index = document.Form1.elements[i].id.lastIndexOf("_");
var price = parseInt( document.all(document.Form1.elements[i].substring(0,currentIndex) + 'DataGrid中商品单价Label的ID' ).innerText );//取到该行商品的单价
var len = TotalScore/price;
var selectIndex = document.Form1.elements[i].selectedIndex; document.Form1.elements[i].length = 0;
for( var j=0;j<= len;j++ )
{
document.Form1.elements[i].options[j] = new Option(j,j);
}
if( selectIndex>0)
document.Form1.elements[i].selectedIndex = selectIndex;
}
}