由于用了easyui,网上找的一些案例都不适用,原因是自己的源代码呈现在网页时会被easyui二次改造,结果组件什么的都会改变掉。如下图:
如图所示原本只有一个 input 但是被改造后多了两个,原因是我在class中使用了easyui-numberbox,这是用来检验输入框中只能是输入数字。
可以设置多个table,这里就只放一个,组件中的id,name可以忽略,不影响效果
<table cellpadding="5" id="tb1">
<tr>
<td>1.特殊结构房屋
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data11" data-options="required:true" style="width:50px;height:18px"/>
㎡,补偿标准
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data12" data-options="required:true" style="width:50px;height:18px"/>
元/㎡,补偿费
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data13" data-options="required:true" style="width:60px;height:18px"/>
元
</td>
</tr>
<tr>
<td>2.框架结构房屋
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data21" data-options="required:true" style="width:50px;height:18px"/>
㎡,补偿标准
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data22" data-options="required:true" style="width:50px;height:18px"/>
元/㎡,补偿费
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data23" data-options="required:true" style="width:60px;height:18px"/>
元</td>
</tr>
<tr>
<td>3.砖混结构房屋
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data31" data-options="required:true" style="width:50px;height:18px"/>
㎡,补偿标准
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data32" data-options="required:true" style="width:50px;height:18px"/>
元/㎡,补偿费
<input class="easyui-numberbox textbox" min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" name="data33" data-options="required:true" style="width:60px;height:18px"/>
元</td>
</tr>
</table>
JS代码块:由于项目需求 提前做了封装,三个数据放一组
var agreementContentList=[];
//p批量获取 input 的值
var tables = [];
var k = 0;
tables = document.getElementsByTagName("table");
for(var i=0;i<tables.length-1;i++) {
var tds = [];
tds = tables[i].getElementsByTagName("td");
for(var j=0;j<tds.length;j++) {
var inputs = [];
inputs = tds[j].getElementsByClassName("easyui-numberbox");
if( inputs[1].value != "" && inputs[2].value != "" ){
var agreementContent = {
RID : "anyID",
PID : "agreementID",
type : i,
count : inputs[0].value,
Unit1 : 122,
compensationStandard : inputs[1].value,
Unit2 : 112,
compensationFee : inputs[2].value,
Unit3 : 132,
};
agreementContentList[k]=agreementContent;
k++;
}
}
}
下面给出 其他方法 :适用于非easyui的情况
//方法一:
var value;
var tddata = new Array();
$("td input").each(
function()
{
value = $(this).val();
tddata.push(value);
}
);
var list = new Array();
for(var m =0 ; m < tddata.length/3 ; m=m+3){
list.push(tddata[m])
}
for(var w = 0 ; w < list.length/3 ; w=w+3){
var data1;
var data2;
var data3;
data1 = list[w];
data2 = list[w+1];
data3 = list[w+2];
console.info(data1+"======="+data2+"====="+data3);
}
console.info(list);
//方法二:
for (var j = 1 ; j < 6; j++) {
var id = "tb"+j;
console.info(id)
var table = document.getElementById(id);
// 获取 table 内的全部 input
var textinputs = table.getElementsByTagName('input');
console.log(textinputs);
var data1;
var data2;
var data3;
var ss = 0;
// 循环
for(var i = 0; i < textinputs.length; i=i+9) {
// 将 textinput 的值置于 textinput 上一级 td 节点的下一个同级 td 节点中
//textinputs[i].parentNode.nextSibling.innerHTML = textinputs[i].value;
}
}