62,266
社区成员
发帖
与我相关
我的任务
分享这个js可以点击+文本+1，点击- 文本减1，点击清空为0 假如有一百个呢
<table>
<tr><td>
<asp:Button runat="server" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="num" Height="25px" style="margin-top: 0px" Width="73px" >0
</asp:TextBox> <asp:Button runat="server" ID="reduce" Text="-" Height="34px" Width="38px"/>
<asp:Button runat="server" ID="delete" Text="清空" Height="33px" Width="61px" />
</td></tr>
</table> $('#<%=Add.ClientID%>').click(function () {
var q = parseInt($('#<%=num.ClientID%>').val());
$('#<%=num.ClientID%>').val(q + 1);
});
$('#<%=reduce.ClientID%>').click(function () {
var q = parseInt($('#<%=num.ClientID%>').val());
if (q > 0)
$('#<%=num.ClientID%>').val(q - 1);
});
$('#<%=delete.ClientID%>').click(function () {
var q = parseInt($('#<%=num.ClientID%>').val());
if (q > 0)
$('#<%=num.ClientID%>').val(q * 0);
});这个js可以点击+文本+1，点击- 文本减1，点击清空为0
假如我有一百或者更多这样的
<table>
<tr><td>
<asp:Button runat="server" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="num" Height="25px" style="margin-top: 0px" Width="73px" >0
</asp:TextBox> <asp:Button runat="server" ID="reduce" Text="-" Height="34px" Width="38px"/>
<asp:Button runat="server" ID="delete" Text="清空" Height="33px" Width="61px" />
</td></tr>
</table>该如何写才能使我每个都能进行操作
...全文
请发表友善的回复…
发表回复
q347657310 2017-06-21
- 打赏
- 举报
大神我私信给你，你看到了吗？求助啊
用戶ID080 2017-06-21
- 打赏
- 举报
我贴出了 中间的一部分 中间的都一样
尴尬 好吧 我需要的是学习
活在现实007 2017-06-21
- 打赏
- 举报
你这是html,javascript入门教材都没看就直接想跑了啊
1、这个页面应用了三个版本jquery
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
实际上只需要一个就可以了，1.9以下的版本就不要用了
2、页面下方的两段按钮事件代码实际上是说的一件事情，你需要注释掉其中一个
3、我写的事件响应使用了类选择器，你没有使用这个类的元素怎么可能触发事件函数呢？
4、add和remove事件响应函数中使用了JQuery查找同级前/后元素的函数，所以需要注意元素的顺序，你可以把它们都换成clear事件响应中的选择元素方式，这样不用管元素顺序。
5、不知道你是怎么调试JS的，我一般情况下都使用chrome开发者工具
6、给你推荐个入门教程网站，我当年也是用的这个入门
http://www.w3school.com.cn/
1、这个页面应用了三个版本jquery
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
实际上只需要一个就可以了，1.9以下的版本就不要用了
2、页面下方的两段按钮事件代码实际上是说的一件事情，你需要注释掉其中一个
3、我写的事件响应使用了类选择器，你没有使用这个类的元素怎么可能触发事件函数呢？
4、add和remove事件响应函数中使用了JQuery查找同级前/后元素的函数，所以需要注意元素的顺序，你可以把它们都换成clear事件响应中的选择元素方式，这样不用管元素顺序。
5、不知道你是怎么调试JS的，我一般情况下都使用chrome开发者工具
6、给你推荐个入门教程网站，我当年也是用的这个入门
http://www.w3school.com.cn/
以专业开发人员为伍 2017-06-21
- 打赏
- 举报
当你定义了100个 javascript 自定义对象，你的 100 个html 片段就会跟这100个对象分别绑定，例如片段中的第一个 Button 的 clientclient 会跟 data[0].add 函数相绑定，而第二个 button 的 clientclick 会跟 data[0].minus 函数相绑定，而 TextBox 的值的设置操作实际上会跟 data[0].value.changed 相绑定。如此类推，就好象你在 asp.net 的模板中只要写一遍 html定义就能在服务器端绑定出100个局部视图一样，在前端也是自动绑定 100个 data 到 200个 button 和 200个 文本框上。
但是这里的关键就是，不用 javascript、jquery 框架等去额外假设和操作无关的 DOM，就是直截了当地进行文本框、按钮跟数据的绑定开发，根本不假设还有什么 td、tr、table 等等。
以专业开发人员为伍 2017-06-21
- 打赏
- 举报
其实专门进行前端设计的人会定义 javascript 业务对象，它自身有相关的属性和操作，例如一个对象有“值、加、减”等属性，然后在声明 TextBox、Button 的时候把它们的事件跟这个 javascript 对象的操作或者值绑定在一起。
我现在最应该告诉你、提醒你的的是，其实好的大一点的前端设计，根本不是在 js 中去选择查找 DOM，因为你设计开发的就是一个通用的片段。
可以这样说，当我问“这样两个Button、两个TextBox 如何绑定一个明细数据的增减操作”的问题时，如果回答者超出了这个范围而去纠结 table、tr、td 等等结构，那么就不是我们需要的前端开发人员的设计技术了。
用戶ID080 2017-06-21
- 打赏
- 举报
</div>
<br />
<div>
</div>
<%--<table>
<tr><td> <asp:Button runat="server" ID="reduce1" Text="-" Height="34px" Width="38px"/>
<asp:TextBox runat="server" ID="total1" Height="25px" style="margin-top: 0px" Width="73px" >0 </asp:TextBox>
<asp:Button runat="server" ID="Add1" Text="+" Height="33px" Width="52px" />
<asp:Button runat="server" ID="delete1" Text="清空" Height="33px" Width="61px" />
</td></tr>
</table>--%>
</div>
</form>
</body>
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('table tr td').on('click', '.add', function () {
var value = parseInt($(this).next(':first').val());
$(this).next(':first').val(value + 1);
})
$('table tr td').on('click', '.remove', function () {
var value = parseInt($(this).prev(':first').val());
$(this).prev(':first').val(value - 1);
})
$('table tr td').on('click', '.clear', function () {
$(this).siblings('.show').val(0);
})
})
$('#<%=Add.ClientID%>').click(function () {
var q = parseInt($('#<%=tax1.ClientID%>').val());
$('#<%=tax1.ClientID%>').val(q + 1);
});
$('#<%=reduce.ClientID%>').click(function () {
var q = parseInt($('#<%=tax1.ClientID%>').val());
if (q > 0)
$('#<%=tax1.ClientID%>').val(q - 1);
});
$('#<%=delete.ClientID%>').click(function () {
var q = parseInt($('#<%=tax1.ClientID%>').val());
if (q > 0)
$('#<%=tax1.ClientID%>').val(q * 0);
});
</script>
</html>
用戶ID080 2017-06-21
- 打赏
- 举报
<table style="float:left;margin-left:5px;margin-top:15px" >
<tr><td></td><td align="right" >平光
<asp:Button runat="server" ID="reduce" Text="-" Height="33px" Width="52px" style="background-color:#1ebeb9"/>
<asp:TextBox runat="server" ID="tax1" Height="25px" style="margin-top: 0px;background-color:#DDCCDD" Width="73px" onchange="Settotal('tax1');" >
</asp:TextBox> <asp:Button runat="server" ID="Add" Text="+" Height="34px" Width="38px" style="background-color:#1ebeb9"/>
<asp:Button runat="server" ID="delete" Text="清空" Height="33px" Width="61px" style="background-color:#1ebeb9"/>
</td></tr>
<tr><td></td><td align="right" bgcolor="#e5e5e5" >-100
<asp:Button runat="server" ID="Button92" Text="-" Height="33px" Width="52px" CssClass="remove" />
<asp:TextBox runat="server" ID="tax2" Height="25px" style="margin-top: 0px" Width="73px" Text="0" CssClass="show" onchange="Settotal('tax2');" >
</asp:TextBox> <asp:Button runat="server" ID="Button93" Text="+" Height="34px" Width="38px" CssClass="add" />
<asp:Button runat="server" ID="Button94" Text="清空" Height="33px" Width="61px" CssClass="clear" />
</td>
</tr> <tr><td colspan="2" align="right">-125
<asp:Button runat="server" ID="Button95" Text="-" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="tax3" Height="25px" style="margin-top: 0px" Text="0" Width="73px" onchange="Settotal('tax3');" >
</asp:TextBox> <asp:Button runat="server" ID="Button96" Text="+" Height="34px" Width="38px"/>
<asp:Button runat="server" ID="Button97" Text="清空" Height="33px" Width="61px" />
</td></tr> <tr><td></td><td align="right" bgcolor="#e5e5e5">-150
<asp:Button runat="server" ID="Button98" Text="-" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="tax4" Height="25px" style="margin-top: 0px" Width="73px" onchange="Settotal('tax4');" Text="0" >
</asp:TextBox> <asp:Button runat="server" ID="Button99" Text="+" Height="34px" Width="38px"/>
<asp:Button runat="server" ID="Button100" Text="清空" Height="33px" Width="61px" />
</td></tr> <tr><td></td><td align="right" >-175
<asp:Button runat="server" ID="Button101" Text="-" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="tax5" Height="25px" style="margin-top: 0px" Width="73px" onchange="Settotal('tax5');" Text="0" >
</asp:TextBox> <asp:Button runat="server" ID="Button102" Text="+" Height="34px" Width="38px"/>
<asp:Button runat="server" ID="Button103" Text="清空" Height="33px" Width="61px" />
</td></tr> <tr><td></td><td align="right" bgcolor="#e5e5e5">-200
<asp:Button runat="server" ID="Button104" Text="-" Height="33px" Width="52px" />
<asp:TextBox runat="server" ID="tax6" Height="25px" style="margin-top: 0px" Width="73px" onchange="Settotal('tax6');" Text="0">
用戶ID080 2017-06-21
- 打赏
- 举报
你可以贴出代码，我试试能不能帮你找出原因[/quote]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Order_new2.aspx.cs" Inherits="Employee_Order_new2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="Head1">
<title></title>
<link href="../css/GamerGridView.css" rel="stylesheet" type="text/css" />
<link href="../css/calendar.css" rel="stylesheet" type="text/css" />
<link href="../css/modalpopup.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/common.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function roundNumber(num, dec) {
var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
return result;
}
function Settotal(amt) {
var price = $get(amt).value;
if (IsNumeric(price) == false && price > '')
{
alert('请只输入数字');
$get("" + amt).value = 0;
$get("" + amt).focus;
}
else
{
var total = $get("total").value;
var total1 = $get("total1").value;
var total2 = $get("total2").value;
var taxprice = 0
var makprice = 0
var officeprice = 0
for (i = 1; i <= 29; i++)
{
if ($get("tax" + i).value > 0)
taxprice = taxprice + roundNumber($get("tax" + i).value, 3);
if ($get("mkt" + i).value > 0)
makprice = makprice + roundNumber($get("mkt" + i).value, 3);
if ($get("office" + i).value > 0)
officeprice = officeprice + roundNumber($get("office" + i).value, 3);
}
//var makprice = 0
//for (i = 1; i <= 29; i++) {
// if ($get("mkt" + i).value > 0)
// makprice = makprice + roundNumber($get("mkt" + i).value, 3);
//}
//var officeprice = 0
//for (i = 1; i <= 29; i++) {
// if ($get("office" + i).value > 0)
// officeprice = officeprice + roundNumber($get("office" + i).value, 3);
//}
$get("total").value = roundNumber(parseFloat(taxprice), 3);//+ parseFloat(makprice) + parseFloat(officeprice) + parseFloat(office10_1) + parseFloat(office11_1) + parseFloat(tax10_1) + parseFloat(tax13_1) + parseFloat(tax14_1) + parseFloat(tax15),
$get("total2").value = roundNumber(parseFloat(makprice), 3);
$get("total1").value = roundNumber(parseFloat(officeprice), 3);
}
}
</script>
<style type="text/css">
.auto-style1 {
color: #000000;
}
.auto-style2 {
color: #800000;
font-size: x-large;
background-color: #DDCCDD;
}
</style>
</head>
<body style="background-color:#f5f5f5;width:100%">
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server" />
<div style="font-size:18px">
<div ><table border="1" bordercolor="#c8cccc" width="100%" style="margin-top:15px">
</table>用戶ID080 2017-06-20
- 打赏
- 举报
好像没用啊 是不是我放的位置不对 具体该怎么做呢 求大神告解，谢谢
全栈极简 2017-06-20
- 打赏
- 举报
$("table tr td button").each(function(){
$(this).bind("click", function () {
//click事件代码
};
});
活在现实007 2017-06-20
- 打赏
- 举报
你可以贴出代码，我试试能不能帮你找出原因
用戶ID080 2017-06-20
- 打赏
- 举报
确实有用 可能是我页面的原因把 我写的js代码有一部分运行不了 没反应感觉
活在现实007 2017-06-20
- 打赏
- 举报
注意jquery版本
活在现实007 2017-06-20
- 打赏
- 举报
我可以不用input吗？ 我想用asp写[/quote]
虽然有点奇怪，
[/quote]
我把测试ok的完整代码贴上，你看下
<table>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="num" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="reduce" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="delete" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button1" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox1" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button2" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button3" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button4" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox2" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button5" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button6" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
</table><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Demo_Test.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
<style type="text/css">
table td input {
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="num" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="reduce" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="delete" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button1" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox1" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button2" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button3" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button4" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox2" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button5" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button6" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
$('table tr td').on('click', '.add', function () {
var value = parseInt($(this).next(':first').val());
$(this).next(':first').val(value + 1);
})
$('table tr td').on('click', '.remove', function () {
var value = parseInt($(this).prev(':first').val());
$(this).prev(':first').val(value - 1);
})
$('table tr td').on('click', '.clear', function () {
$(this).siblings('.show').val(0);
})
})
</script>
用戶ID080 2017-06-20
- 打赏
- 举报
我可以不用input吗？ 我想用asp写[/quote]
虽然有点奇怪，
<table>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="num" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="reduce" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="delete" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button1" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox1" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button2" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button3" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button4" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox2" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button5" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button6" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
</table>活在现实007 2017-06-20
- 打赏
- 举报
我可以不用input吗？ 我想用asp写[/quote]
虽然有点奇怪，
<table>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Add" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="num" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="reduce" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="delete" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button1" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox1" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button2" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button3" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" CssClass="add" ID="Button4" Text="+" Height="33px" Width="52px" />
<asp:TextBox runat="server" CssClass="show" ID="TextBox2" Height="25px" Style="margin-top: 0px" Width="73px">0</asp:TextBox>
<asp:Button runat="server" CssClass="remove" ID="Button5" Text="-" Height="34px" Width="38px" />
<asp:Button runat="server" CssClass="clear" ID="Button6" Text="清空" Height="33px" Width="61px" />
</td>
</tr>
</table>用戶ID080 2017-06-20
- 打赏
- 举报
我可以不用input吗？ 我想用asp写
活在现实007 2017-06-20
- 打赏
- 举报
<table>
<tr>
<td>
<input class="add" type="button" value="+" />
<input class="show" type="text" value="0" />
<input class="remove" type="button" value="-" />
<input class="clear" type="button" value="清空" />
</td>
</tr>
<tr>
<td>
<input class="add" type="button" value="+" />
<input class="show" type="text" value="0" />
<input class="remove" type="button" value="-" />
<input class="clear" type="button" value="清空" />
</td>
</tr><tr>
<td>
<input class="add" type="button" value="+" />
<input class="show" type="text" value="0" />
<input class="remove" type="button" value="-" />
<input class="clear" type="button" value="清空" />
</td>
</tr>
</table> $(function () {
$('table tr td').on('click', '.add', function () {
var value =parseInt($(this).next(':first').val());
$(this).next(':first').val(value + 1);
})
$('table tr td').on('click', '.remove', function () {
var value = parseInt($(this).prev(':first').val());
$(this).prev(':first').val(value - 1);
})
$('table tr td').on('click', '.clear', function () {
$(this).siblings('.show').val(0);
})
})
