Gridview 中利用JS使模板列中textBox值为另外两列textBox值之和(客户端输入动态求和)

Question

部分代码如下:
     <asp:GridView ID="GridView_Content" runat="server" CellPadding="4" ForeColor="#333333" 
            GridLines="None" AutoGenerateColumns="False" PageSize="100"  Width="100%"
                Font-Names="微软雅黑,新宋体,宋体" Font-Size="9pt" 
                  onrowdatabound="GridView_Content_RowDataBound" >
                <RowStyle BackColor="#EFF3FB" />
                <Columns>
                   <asp:TemplateField>
                                  <HeaderStyle BackColor="White" CssClass="gridviewlogo" />
                                  <ItemStyle Width="15px" />
                                  <ItemTemplate>
                                    <table border="0" cellpadding="1" cellspacing="1" width="16">
                                      <tr>
                                        <td width="12">
                                          <img height="10" src="../Image/point.png" width="10" /></td>
                                      </tr>
                                    </table>
                                  </ItemTemplate>
                                </asp:TemplateField>
                   <asp:BoundField DataField="学号"  HtmlEncode="false" HeaderText="学号">
                    <HeaderStyle BackColor="White" Font-Size="14px" ForeColor="#002B5F" 
                      HorizontalAlign="Left" />
                  <ItemStyle Width="150px" />
                  </asp:BoundField>
                 
                  <asp:BoundField DataField="学生姓名"  HtmlEncode="false" HeaderText="姓名">
                    <HeaderStyle BackColor="White" Font-Size="14px" ForeColor="#002B5F" 
                      HorizontalAlign="Left" />
                  <ItemStyle Width="150px" />
                  </asp:BoundField>
                  
                   <asp:BoundField DataField="课程名称"  HtmlEncode="false" HeaderText="课程">
                    <HeaderStyle BackColor="White" Font-Size="14px" ForeColor="#002B5F" 
                      HorizontalAlign="Left" />
                  <ItemStyle Width="150px" />
                  </asp:BoundField>
                  
                  <asp:TemplateField HeaderText="平时成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                     
                     <asp:TextBox  ID="TextBox_PeaceTimeScore" runat="server" Width="50px"   onkeyup="javascript:textChange()"> </asp:TextBox>
                   </ItemTemplate>
                  </asp:TemplateField>
                  
                  <asp:TemplateField HeaderText="期末成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                     
                      <asp:TextBox ID="TextBox_FinalScore" runat="server" Width="50px" onkeyup="javascript:textChange()"> </asp:TextBox>
                     </ItemTemplate>
                  </asp:TemplateField>
                  
                  <asp:TemplateField HeaderText="总成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                     
                      <asp:TextBox ID="TextBox_Score" runat="server" Width="50px"  onkeyup="javascript:textChange()"> </asp:TextBox>
                    </ItemTemplate>
                  </asp:TemplateField>
                  
                  
                </Columns>
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" ForeColor="Black" />
                <AlternatingRowStyle BackColor="White" />
              </asp:GridView>    想实现的功能是:
              客户端在Gridview中每一列"平时成绩""期末成绩"输入分数之后,  该列的总成绩即为平时成绩*比例+期末成绩*比例之和, 应该是JS实现,但是不知道该怎么写,故发此帖,希望各位能给予指点,感激不尽~

Answer 1

平时成绩和期末成绩需要textChange函数，总成绩不用textChange函数

Answer 2

函数的参数有三个，分别是 平时成绩，期末成绩和总成绩三个文本框的ID函数的原型 如下:function textChange(ptID,fID,sID)
{
     var pt=document.getElementById(ptID);
     var f=document.getElementById(fID);
     if((pt.value!='')&&(f.value!=''))
     {
         var ptVal=parseFloat(pt.value);
         if(isNaN(ptVal))
         {
             alert('请正确输入平时成绩的分数');
             return;
         }
         var fVal=parseFloat(f.value);
         if(isNaN(fVal))
         {
             alert('请正确输入期末成绩的分数');
             return;
         }
         document.getElementById(sID).value=ptVal+fVal;
     }
     else 
     {
             return;
     }
}

Answer 3

<asp:TemplateField HeaderText="平时成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                   
                    <asp:TextBox  ID="TextBox_PeaceTimeScore" runat="server" Width="50px"  <%# GetJsMethod(sender)%> > </asp:TextBox>
                  </ItemTemplate>
                  </asp:TemplateField>
                 
                  <asp:TemplateField HeaderText="期末成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                   
                      <asp:TextBox ID="TextBox_FinalScore" runat="server" Width="50px"   <%# GetJsMethod(sender)%> > </asp:TextBox>
                    </ItemTemplate>
                  </asp:TemplateField> 
    protected void GetJsMethod(TextBox txt)
    {        
        TextBox txtPT = txt.NamingContainer.FindControl("TextBox_PeaceTimeScore") as TextBox;
        TextBox txtF = txt.NamingContainer.FindControl("TextBox_FinalScore") as TextBox;
        TextBox txtS = txt.NamingContainer.FindControl("TextBox_Score") as TextBox;
        if (txtPT != null && txtF != null && txtS != null)
        {
            txt.Attributes.Add("onkeyup", string.Format("textChange('{0}','{1}','{2}')", txtPT.ClientID, txtF.ClientID, txtS.ClientID));
        }     
    }

Answer 4

4#楼想法挺好，可是怎样处理“服务器标记格式不正确”这个根本编译不过去的问题？就算编译过去了，sender是什么东西？

Answer 5

函数的参数有三个，分别是 平时成绩，期末成绩和总成绩三个文本框的ID 函数的原型 如下: 
JScript codefunction textChange(ptID,fID,sID) 
{var pt=document.getElementById(ptID);var f=document.getElementById(fID);if((pt.value!='')&&(f.value!='')) 
    {var ptVal=parseFloat(pt.value);if(isNaN(ptVal)) 
        { 
            alert('请正确输入平时成绩的分数');return; 
        }var fVal=parseFloat(f.value);if(isNaN(fVal)) 
        { 
            alert('请正确输入期末成绩的分数');return; 
        } 
        document.getElementById(sID).value=ptVal+fVal; 
    }else 
    {return; 
    } 
} 

Answer 6

不好意思，刚才手写没测试，服务器标记的部分 光想简洁了
<asp:TextBox  ID="TextBox_PeaceTimeScore" runat="server" Width="50px" onkeyup="<%# GetJsMethod(sender as TextBox)%>"  > </asp:TextBox>
<asp:TextBox ID="TextBox_FinalScore" runat="server" Width="50px" onkeyup="<%# GetJsMethod(sender as TextBox)%>" > </asp:TextBox>
    protected string GetJsMethod(TextBox txt)
    {
        string result = string.Empty;
        TextBox txtPT = txt.NamingContainer.FindControl("TextBox_PeaceTimeScore") as TextBox;
        TextBox txtF = txt.NamingContainer.FindControl("TextBox_FinalScore") as TextBox;
        TextBox txtS = txt.NamingContainer.FindControl("TextBox_Score") as TextBox;
        if (txtPT != null && txtF != null && txtS != null)
        {
            result = string.Format("textChange('{0}','{1}','{2}')", txtPT.ClientID, txtF.ClientID, txtS.ClientID);
        }
        return result;
    }

Answer 7

当然是控件本身了txt.Attributes.Add("onkeyup", string.Format("textChange('{0}','{1}','{2}')", txtPT.ClientID, txtF.ClientID, txtS.ClientID));
这句就可以看出来
        

Answer 8

这个好简单的事，不需要用服务器端代码呀，
应该全部在客户端实现。
<asp:TemplateField HeaderText="平时成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                   
                    <asp:TextBox  ID="TextBox_PeaceTimeScore" runat="server" Width="50px" onchange="CountPoint1(this);" > </asp:TextBox>
                  </ItemTemplate>
                  </asp:TemplateField>
                 
                  <asp:TemplateField HeaderText="期末成绩">
                    <HeaderStyle  BackColor="White" ForeColor ="#002B5F"  />
                      <ItemStyle Width="50px" />
                    <ItemTemplate>                   
                      <asp:TextBox ID="TextBox_FinalScore" runat="server" Width="50px" onchange="CountPoint(this);"> </asp:TextBox>
                    </ItemTemplate>
                  </asp:TemplateField> 

Answer 9

function CountPoint1(obj)
{
var tr=obj.parentNode.parentNode;
var TextBox_FinalScore = tr.childNodes[5].childNodes[0];//5就是这一行的第几列，你自己改下
var TextBox_Score = tr.childNodes[6].childNodes[0];//
TextBox_Score.value = 0+ obj.value + TextBox_FinalScore.value;//自己加吧
}
function CountPoint(obj)
{
}

Answer 10

如果 你要是知道事件源这个概念 是否会将this 也省略呢？

Answer 11

function cal(_obj) { 
        var tr=_obj.parentNode.parentNode; 
        var num=tr.cells[1].firstChild; 
        var p=tr.cells[2].firstChild; 
        tr.cells[3].firstChild.value=(num.value==""?0:num.value)*(p.value==""?0:pri.value);
    }
http://topic.csdn.net/u/20090411/14/995dadd2-e45e-47ea-8ab9-a583f86024df.html

Answer 12

呵呵 ~ 列数要是增加或减少 你需要改， 同列加控件 你还是要改。这个习惯 就像 insert into tableName values() 一样是否 增加时 你也这么写呢

Answer 13

迷糊,能写完整点吗？
var tr=obj.parentNode.parentNode;?看不大懂,JS 没咋学，能解释下吗？谢谢，不胜感激

Answer 14

起初在绑定值的时刻就给客户端控件赋值，在用jquery去实现。应当可以。

Answer 15

客户端：
  <asp:TextBox  ID="TextBox_PeaceTimeScore" runat="server" Width="50px"   onkeyup="<%# GetJsMethod(sender as TextBox)%>" > </asp:TextBox>
           
                  
  <asp:TextBox ID="TextBox_FinalScore" runat="server" Width="50px" onkeyup="<%# GetJsMethod(sender as TextBox)%>" > </asp:TextBox>
C#: protected string GetJsMethod(TextBox txt)
    {
      string result = string.Empty;
      TextBox txtPT = txt.NamingContainer.FindControl("TextBox_PeaceTimeScore") as TextBox;
      TextBox txtF = txt.NamingContainer.FindControl("TextBox_FinalScore") as TextBox;
      TextBox txtS = txt.NamingContainer.FindControl("TextBox_Score") as TextBox;
      if (txtPT != null && txtF != null && txtS != null)
      {
        result = string.Format("textChange('{0}','{1}','{2}')", txtPT.ClientID, txtF.ClientID, txtS.ClientID);
      }
      return result;
    }

Answer 16

JS：
<script type="text/javascript">    function pageLoad() {
    }    
      function textChange() {
          alert("331");
          var gv = document.getElementById("GridView_Content");
          alert("333");
          var peaceTime = gv.getElementById("TextBox_PeaceTimeScore").value;
          alert("334");
          var finalTime = gv.getElementById("TextBox_FinalScore").value;
          gv.getElementById("TextBox_Score").value = peaceTime + finalTime;
          alert("12");
      
      }</script>

Answer 17

function textChange(ptID,fID,sID)
{
     var pt=document.getElementById(ptID);
     var f=document.getElementById(fID);
     if((pt.value!='')&&(f.value!=''))
     {
         var ptVal=parseFloat(pt.value);
         if(isNaN(ptVal))
         {
             alert('请正确输入平时成绩的分数');
             return;
         }
         var fVal=parseFloat(f.value);
         if(isNaN(fVal))
         {
             alert('请正确输入期末成绩的分数');
             return;
         }
         document.getElementById(sID).value=ptVal+fVal;
     }
     else 
     {
             return;
     }
}

Answer 18

好使了 谢谢，顺便问下
document.getElementById(sID).value = ptVal * parseFloat(%=Session("peaceTimeProportion") %) + fVal* parseFloat(%=Session("finalProportion") %);
这个写法出错了,该怎么把SESSION 乘进去呢，谢谢

Answer 19

<%=Session("finalProportion")%>

Answer 20

<%=Session["finalProportion"]%>

Answer 21

  function textChange(ptID, fID, sID) {
            var peaceTimeProportion = '<%=Session["peaceTimeProportion"]%>';
            var finalProportion = '<%=Session["finalProportion"] %>';
            //var fP = parseFloat(finalProportion);
            //var pt = document.getElementById(ptID);
            var f = document.getElementById(fID);
            if ((pt.value != '') && (f.value != '')) {
                var ptVal = parseFloat(pt.value);
                if (isNaN(ptVal)) {
                    alert('请正确输入平时成绩的分数');
                    return;
                }
                var fVal = parseFloat(f.value);
                if (isNaN(fVal)) {
                    alert('请正确输入期末成绩的分数');
                    return;
                }
                //alert(fP);
                document.getElementById(sID).value = peaceTimeProportion * ptVal + finalProportion  * fVal;
            }
            else {
                return;
            }帮我看看这个?还是不好使,呵呵 谢谢~

Answer 22

还不好用么？ 你可以把SESSION 当参数传递