想问问大家这个东西怎么用js才能实现啊，后台也行
问问大家就是这种我想在GrdiView里面的文本框输入数值，然后下面的汇总表数字会跟着变，用js要怎么写呢，还有就是我现在是四个控件嘛，汇总表的话是将四ge文本框的内容加在一起的求得的，不知道怎么做
<cc:PagingGridView ID="PagingGridView2" Width="100%" runat="server" AutoGenerateColumns="False"
PageSize="10" AllowPaging="false" CssClass="grid_view" OnBindDataSource="PagingGridView1_BindDataSource" OnRowDataBound="PagingGridView1_RowDataBound">
<EmptyDataTemplate>
无相关数据
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="指标名称">
<HeaderStyle Width="10%" />
<ItemStyle Width="10%" CssClass="cneter" />
<ItemTemplate>
<span title='<%# Eval("zbmc") %>'>
<%# Eval("zbmc")%>
</span>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="满分">
<HeaderStyle Width="20%" />
<ItemStyle Width="20%" CssClass="cneter" />
<ItemTemplate>
<span title='100'>
100
</span>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="兔兔科技有限公司">
<HeaderStyle Width="8%" />
<ItemStyle Width="8%" />
<ItemTemplate>
<asp:TextBox ID="txtCo1" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="浙江工越信息科技有限公司">
<HeaderStyle Width="8%" />
<ItemStyle Width="8%" />
<ItemTemplate>
<asp:TextBox ID="txtCo2" runat="server" ></asp:TextBox>
</span>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="td1" />
<HeaderStyle CssClass="td_bthead" />
<PagerStyle CssClass="td0" />
<AlternatingRowStyle CssClass="td2" />
</cc:PagingGridView>
<div class="bar" style="margin-left:10px;" >
<span>汇总表</span>
</div>
<div style="margin-top:50px;">
<table style="margin-left:50px;width:800px;height:200px;" >
<tr>
<td>评分表格</td>
<td>权重</td>
<td>兔兔科技有限公司</td>
<td>浙江工越信息科技有限公司</td>
</tr>
<%--<tr>
<td>资信指标</td>
<td>30%</td>
<td><asp:label runat="server" ID="txtTt1" ReadOnly="true"></asp:label></td>
<td><asp:label runat="server" ID="txtGy1" ReadOnly="true"></asp:label></td>
</tr>
<tr>--%>
<td>技术指标</td>
<td>50%</td>
<td><asp:label runat="server" ID="txtTt2" ReadOnly="true"></asp:label></td>
<td><asp:label runat="server" ID="txtGy2" ReadOnly="true"></asp:label></td>
</tr>
<tr>
<td>价格分</td>
<td>20%</td>
<td><asp:TextBox ID="txtJg1" runat="server" ></asp:TextBox> </td>
<td><asp:TextBox ID="txtJg2" runat="server" ></asp:TextBox> </td>
</tr>
<tr>
<td>最终得分</td>
<td></td>
<td><asp:label runat="server" ID="txtTt4" ReadOnly="true"></asp:label></td>
<td><asp:label runat="server" ID="txtGy4" ReadOnly="true"></asp:label></td>
</tr>
</table>
</div>
要是用vue 就太轻松了
你这个是上面输入下面就变 还是点确认下面会变
前端JS只需要找到这些Id 以PagingGridView2_txtCo1_ 开头的元素就能统计了。后面一列类似
protected void btnHuizong_Click(object sender, EventArgs e)
{
var txts= this.PagingGridView2.Rows;
var total = 0;
var total2 = 0;
foreach (GridViewRow row in txts)
{
var obj = row.FindControl("txtCo1");
if (obj!=null) {
//这里需要判断输入是否合法
total += int.Parse(((TextBox)obj).Text);
}
var obj1 = row.FindControl("txtCo2");
if (obj1 != null)
{
//这里需要判断输入是否合法
total2 += int.Parse(((TextBox)obj1).Text);
}
}
}
input标签有一个事件，当内容改变时执行，这个时候在js中读取内容并计算，最后写入到你想要的地方即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
//表格添加行
function AddRow(table) {
var lastRow = table.rows[table.rows.length - 1];
var newRow = lastRow.cloneNode(true);
var length = table.rows.length;
table.tBodies[0].appendChild(newRow);
newRow.cells[0].innerHTML = "<input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">";
newRow.cells[0].setAttribute("id","供料");
newRow.cells[1].innerHTML = "供料载具" //设置表格为NULL
//newRow.cells[2].innerHTML = "varchar"
//newRow.cells[2].setAttribute("value","varchar");
//newRow.cells[3].innerHTML = "10"
newRow.cells[2].innerHTML = "Carrier Board (191*77) "
//newRow.cells[2].setAttribute("value","false");
//newRow.cells[3].innerHTML = "false"
//newRow.cells[3].setAttribute("value","false");
newRow.cells[3].innerHTML = ""
//根据行号奇偶设置不一样背景色
if(length%2 == 1){
newRow.cells[0].setAttribute("bgcolor","#FFFFFF");
newRow.cells[1].setAttribute("bgcolor","#FFFFFF");
newRow.cells[2].setAttribute("bgcolor","#FFFFFF");
newRow.cells[3].setAttribute("bgcolor","#FFFFFF");
// newRow.cells[4].setAttribute("bgcolor","#FFFFFF");
// newRow.cells[5].setAttribute("bgcolor","#FFFFFF");
// newRow.cells[6].setAttribute("bgcolor","#FFFFFF");
}else{
newRow.cells[0].setAttribute("bgcolor","#f2fbff");
newRow.cells[1].setAttribute("bgcolor","#f2fbff");
newRow.cells[2].setAttribute("bgcolor","#f2fbff");
newRow.cells[3].setAttribute("bgcolor","#f2fbff");
// newRow.cells[4].setAttribute("bgcolor","#f2fbff");
// newRow.cells[5].setAttribute("bgcolor","#f2fbff");
// newRow.cells[6].setAttribute("bgcolor","#f2fbff");
}
//设置表格行可编辑
SetRowCanEdit(newRow);
return newRow;
}
//设置表格行可编辑
function SetRowCanEdit(row) {
for (var i = 0; i < row.cells.length; i++) {
//当前单元格指定了编辑类型，容许编辑
var editType = row.cells[i].getAttribute("EditType"); if (!editType) {
//当前单元格没有指定，查看当前列是否指定
editType = row.parentNode.rows[0].cells[i].getAttribute("EditType"); }
if (editType) {
row.cells[i].onclick = function() { EditCell(this); }
}
}
}
//设置指定单元格可编辑
function EditCell(element, editType) {
var editType = element.getAttribute("EditType");
if (!editType) {
//若是当前单元格没有指定，则查看当前列是否指定
editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
}
switch (editType) {
case "TextBox":
CreateTextBox(element, element.innerHTML);
break;
case "DropDownList":
CreateDropDownList(element);
break; default: break;
}
}
//为单元格建立可编辑输入框
function CreateTextBox(element, value) {
//编辑状态，true为编辑状态
var editState = element.getAttribute("EditState");
if (editState != "true") {
//建立文本框
var textBox = document.createElement("INPUT");
textBox.style="width:100%";
textBox.type = "text";
textBox.className = "EditCell_TextBox";
//设置当前值
if (!value) {
value = element.getAttribute("Value");
} textBox.value = value;
//设置失去焦点事件
textBox.onblur = function() {CancelEditCell(this.parentNode, this.value); }
//向当前单元格添加文本框
ClearChild(element);
element.appendChild(textBox);
textBox.focus(); textBox.select();
//设置编辑状态
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex); }
}
//为单元格建立选择框
function CreateDropDownList(element, value) {
//编辑状态， true为编辑状态
var editState = element.getAttribute("EditState");
if (editState != "true") {
//建立下拉框
var downList = document.createElement("Select");
downList.style="width:100%";
downList.className = "EditCell_DropDownList";
//添加列表项
var items = element.getAttribute("DataItems");
if (!items) {
items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}
if (items) {
items = eval("[" + items + "]");
for (var i = 0; i < items.length; i++) {
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value; downList.options.add(oOption);
}
}
//设置列表当前值
if (!value) {
value = element.getAttribute("Value");
} downList.value = value;
//设置下拉框失去焦点事件
downList.onblur = function() {
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}
//向当前单元格添加下拉框
ClearChild(element);
element.appendChild(downList);
downList.focus();
//设置编辑状态
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}
}
//取消单元格编辑状态
function CancelEditCell(element, value, text) {
element.setAttribute("Value", value);
if (text) {
element.innerHTML = text;
} else {
element.innerHTML = value;
} element.setAttribute("EditState", "false");
}
//清空指定对象的全部字节点
function ClearChild(element) {
element.innerHTML = "";
}
//删除行
function DeleteRow(table) {
for (var i = table.rows.length - 1; i > 0; i--) {
var chkOrder = table.rows[i].cells[0].firstChild;
if (chkOrder) {
if (chkOrder.type = "CHECKBOX") {
if (chkOrder.checked) {
table.deleteRow(i);
}
}
}
}
}
//提取表格全部值,JSON格式，能够将该值赋予一个隐藏的input标签，提交表单至后台进行处理
function GetTableData() {
var table = document.getElementById("filedTable");
var Obj = {Mark:"",Columnname:"",Datatype:"",Length:"",Primarykey:"",Isnull:"",Comments:""};
var datamodeldata = JSON.parse("{\"data\":[]}");
for(var i=1;i<table.rows.length;i++){
var Obj = new Object();
Obj.Mark = table.rows[i].cells[0].id;
Obj.Columnname = table.rows[i].cells[1].innerHTML;
Obj.Datatype = table.rows[i].cells[2].innerHTML;
Obj.Length = table.rows[i].cells[3].innerHTML;
// Obj.Primarykey = table.rows[i].cells[4].innerHTML; //数据
// Obj.Isnull = table.rows[i].cells[5].innerHTML;
// Obj.Comments = table.rows[i].cells[6].innerHTML;
datamodeldata.data.push(Obj);
}
var name = document.getElementById("data");
name.value = JSON.stringify(datamodeldata).toString();
return JSON.stringify(datamodeldata).toString();
}
//本表格数据为数据库字段数据
//判断字段名称是否重复
function ColumnnameDuplicate(){
var table = document.getElementById("filedTable");
var array = new Array();
var b = false;
for(var i=1;i<table.rows.length;i++){
array.push(table.rows[i].cells[1].innerHTML);
}
var nary=array.sort();
for(var i=0;i<array.length;i++){
if (nary[i]==nary[i+1]){
b = true;
}
}
return b;
}
//提交表格时，判断是否存在数据行
function TableRows(){
var table = document.getElementById("filedTable");
var length = table.rows.length;
var b = false;
if(length>=2){
b=true;
}
return b;
}
//判断字段名称是否为空
function ColumunameIsnull(){
var table = document.getElementById("filedTable");
var b = false;
for(var i=1;i<table.rows.length;i++){
if(table.rows[i].cells[1].innerHTML==""){
b = true;
}
}
return b;
}
</script>
<body>
<div class="ibox-content col-md-12" style="padding-top: 0px; border: 0px; height: 100%; width: 100%">
<input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('filedTable'))" />
<input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('filedTable'))" />
<form method='POST' action='save_data.php'>
<input type="hidden" id="data" name="data" >
<input type="submit" value="保存" onclick="GetTableData()" >
</form>
<table class="table" id="filedTable">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="check">
<input type="checkbox" name="checkbox" value="checkbox" />
</td>
<td width="162" bgcolor="#EFEFEF" Name="columnname" EditType="TextBox">项目</td>
<!--<td width="112" bgcolor="#EFEFEF" Name="datatype" EditType="DropDownList"
DataItems="{text:'int',value:'int'},{text:'varchar',value:'varchar'},
{text:'datetime',value:'datetime'},{text:'longblob',value:'longblob'}">数据类型</td>-->
<td width="172" bgcolor="#EFEFEF" Name="length" EditType="TextBox">要求</td>
<td width="112" bgcolor="#EFEFEF" Name="primarykey" EditType="TextBox"
DataItems="{text:'true',value:'true'},{text:'false',value:'false'}">备注</td>
<!-- <td width="112" bgcolor="#EFEFEF" Name="notnull" EditType="DropDownList"
DataItems="{text:'true',value:'true'},{text:'false',value:'false'}">非空</td>
<td width="206" bgcolor="#EFEFEF" Name="comments" EditType="TextBox">注释</td>-->
</tr>
</table>
<br />
</div>
</body>
</html>