核心提示:由于用了easyui,网上找的一些案例都不适用,原因是自己的源代码呈现在网页时会被easyui二次改造,结果组件什么的都会改变掉。如下图:如图所示原本只有一个 input 但是被改造后多了两个,原因是...
由于用了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; } }