好久没写博客了，今天写一个最近用的比较多的js吧，其实就是页面有多个input，或者是多行，不管是啥，然后把他的值都获取到，下面我写的这个例子是个保存操作，大家一起来看一下。
- 首先来看表格
<table class="table table-border table-bordered table-bg table-hover table-sort" >
<thead>
<tr class="text-c" >
<th width="25"><input type="checkbox" value="" name=""></th>
<th width="25">客户名称</th>
<th width="25">总额度</th>
<th width="25">1月</th>
<th width="25">2月</th>
<th width="25">3月</th>
<th width="25">4月</th>
<th width="25">5月</th>
<th width="25">6月</th>
<th width="25">7月</th>
<th width="25">8月</th>
<th width="25">9月</th>
<th width="25">10月</th>
<th width="25">11月</th>
<th width="25">12月</th>
</tr>
</thead>
<tbody id="tabody" >
<#if customerList?? && (customerList?size > 0) >
<#list customerList as item>
<tr class="text-c">
<td style="background-color:#EEEEEE ">
<input type="checkbox" class="id_checkbox" value="${item.id!}" id="id" name="id">
</td>
<td>${item.cus_name!}<input type="hidden" id="cus_code" value="${item.cus_code!}"></td>
<td><input value="${item.total_money!}" name="total_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.january_money!}" name="january_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.february_money!}" name="february_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.march_money!}" name="march_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.april_money!}" name="april_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.may_money!}" name="may_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.june_money!}" name="june_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.july_money!}" name="july_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.august_money!}" name="august_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.september_money!}" name="september_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.october_money!}" name="october_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.november_money!}" name="november_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
<td><input value="${item.december_money!}" name="december_money" class="input-text" style="width:75%" type="text"
onkeyup="clearNoNum(this)"></td>
</tr>
</#list>
</#if>
</tbody>
</table>注：这就是一个很普通的table表格，不过是有多个值，并且能随时修改。
2、然后来看js怎么取值
//********************************************获取所有数据***************************************
function getSubArray(){
var subArray=[];
var arrtr = $("#tabody").find("tr");
for(var i=0;i<arrtr.length;i++){
var cus_code= $(arrtr[i]).find('td').eq(1).find('input').val(); //客户编码
var total_money= $(arrtr[i]).find('td').eq(2).find('input').val(); //总额度
var january_money = $(arrtr[i]).find('td').eq(3).find('input').val(); //一月
var february_money = $(arrtr[i]).find('td').eq(4).find('input').val(); //二月
var march_money = $(arrtr[i]).find('td').eq(5).find('input').val(); //三月
var april_money = $(arrtr[i]).find('td').eq(6).find('input').val(); //四月
var may_money = $(arrtr[i]).find('td').eq(7).find('input').val(); //五月
var june_money = $(arrtr[i]).find('td').eq(8).find('input').val(); //六月
var july_money = $(arrtr[i]).find('td').eq(9).find('input').val(); //七月
var august_money = $(arrtr[i]).find('td').eq(10).find('input').val(); //八月
var september_money = $(arrtr[i]).find('td').eq(11).find('input').val(); //九月
var october_money = $(arrtr[i]).find('td').eq(12).find('input').val(); //十月
var november_money = $(arrtr[i]).find('td').eq(13).find('input').val(); //十一月
var december_money = $(arrtr[i]).find('td').eq(14).find('input').val(); //十二月
if(total_money==0){
layer.msg('总额度禁止为空');
}
var mSub={
cus_code:cus_code,
total_money:total_money,
january_money:january_money,
february_money:february_money,
march_money:march_money,
april_money:april_money,
may_money:may_money,
june_money:june_money,
july_money:july_money,
august_money:august_money,
september_money:september_money,
october_money:october_money,
november_money:november_money,
december_money:december_money,
};
subArray.push(mSub);
}
return subArray;
}
//**************************************保存数据********************************************
function childFunction(){
var subArray=getSubArray();
var type_code='${type_code!}'; //单据类型编码
console.log("单据类型编码："+type_code);
console.log("数据==>"+subArray.length);
console.log("数据==>"+JSON.stringify(subArray));
if(subArray.length==0){
layer.msg('至少保存一组客户信息',{time:3000});
return ;
}
//总额度
var totalmoney=0;
//一年总和
var summoney=0;
var j=0;
for(var i=0;i<subArray.length;i++){
j=i+1;
totalmoney=eval(subArray[i]).total_money;
if(totalmoney==0){
layer.msg('第'+ j +'位客户总额度禁止为0');
return false;
}
summoney=eval(subArray[i].january_money)+
eval(subArray[i].february_money)+
eval(subArray[i].march_money)+
eval(subArray[i].april_money)+
eval(subArray[i].may_money)+
eval(subArray[i].june_money)+
eval(subArray[i].july_money)+
eval(subArray[i].august_money)+
eval(subArray[i].september_money)+
eval(subArray[i].october_money)+
eval(subArray[i].november_money)+eval(subArray[i].december_money);
if(eval(totalmoney)>eval(summoney)){
layer.msg('第'+ j +'位客户总额度不能大于12个月总和');
return false;
}else if(eval(totalmoney)<eval(summoney)){
layer.msg('第'+ j +'位客户总额度不能小于12个月总和');
return false;
}
}
//数据提交
ajax_pack(
"${basePath}/admin/ordermoney/saveCus",
{data:{moneyList:JSON.stringify(subArray),type_code:type_code}}
, function(data){
if(data.success==1){
layer.msg('保存成功！', {icon: 1});
}else{
layer.msg('保存失败！');
}
}
);
}注：getSubArray()这个方法就是循环获取每列td的值，$(“#tabody”).find(“tr”)是获取表格每一行，tabody是表格的id名，是唯一的，然后获取第一列input的值，就是 $(arrtr[i]).find('td').eq(1).find('input').val() ，然后组装成一个数组，赋值给subArray这个变量；eval(subArray[i].january_money) 取一月份的额度，eval就是为了把字符串转换成数字，其实用parseFloat也行，就为了相加，然后做一些验证；ajax_pack 这段请忽略，其实就是一个ajax提交，简单封装了一下，就成这样，这段忽略。
3、细心的朋友会发现，我上面的html代码中，我调了一个 onkeyup="clearNoNum(this)" 这个方法，这个就是不让乱输入，只能输入数字和小数点儿，首位也不能是小数点，我贴出来你们看下。
//只能输入数字和小数点
function clearNoNum(obj) {
obj.value = obj.value.replace(/[^\d.]/g, "");//清除“数字”和“.”以外的字符
obj.value = obj.value.replace(/^\./g, "");//验证第一个字符是数字而不是.
obj.value = obj.value.replace(/\.{2,}/g, ".");//只保留第一个. 清除多余的.
obj.value = obj.value.replace(".", "$#$").replace(/\./g,"").replace("$#$", ".");
}4、最后的效果图给你们看下
有什么问题，大家可以给我留言，或者是发我qq也行，以前留过qq，这次就不留了，谢谢大家。
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
