JS遍历表格多个input方法

表格HTML：

1. <table class="layui-table" id="myTable">
   
2.                               <tbody>       
   
3.                                                                    <tr>
   
4.                                                                         <th width="20%"><strong>产品名称</strong></th>
   
5.                                                                         <th width="15%"><strong>型号</strong></th>                                                                        
   
6.                                                                        <th><strong>口径</strong></th>
   
7.                                                                        <th><strong>阀体材质</strong></th>                                                         
   
8.                                     <th width="12%"><strong>阀芯材质</strong></th>
   
9.                                      <th width="12%"><strong>阀座材质</strong></th>           
   
10.                                     <th><strong>数量</strong></th>
    
11.                                      <th><strong>库存数量</strong></th>
    
12.                                       <th><strong>计划采购</strong></th>
    
13.                                     
    
14.                                     
    
15.                                       <th><strong>备注</strong></th>
    
16.                                    
    
17.                                                                    </tr>       
    
18.                         <tr><td><input type="text" class="layui-input x-sort" name="sName" value="电动调节阀" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sModel" value="ZDRH-16K" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sCaliber" value="DN25" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FT" value="CD4MnCu" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FX" value="CD4MnCu" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FZ" value="CD4MnCu" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_QTY" value="2" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_STK" value="0" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_Plan" value="2"></td><td><textarea class="layui-input x-sort" name="sRemark" readonly=""> </textarea></td></tr><tr><td><input type="text" class="layui-input x-sort" name="sName" value="衬四氟电动调节阀" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sModel" value="ZDRVF-16K" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sCaliber" value="DN80" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FT" value="304+PTFE" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FX" value="304+PTFE" readonly=""></td><td><input type="text" class="layui-input x-sort" name="sMATL_FZ" value="304+PTFE" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_QTY" value="1" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_STK" value="0" readonly=""></td><td><input type="text" class="layui-input x-sort" name="iAMT_Plan" value="1"></td><td><textarea class="layui-input x-sort" name="sRemark" readonly=""> </textarea></td></tr></tbody>
    
19.                     </table>

复制代码

JavaScript代码：

1. //遍历myTable
   
2. var data_Valve = [];
   
3. var table=document.getElementById("myTable");
   
4.         var rows=table.rows;
   
5.         //console.log(rows.length);//获取表格的行数
   
6. 
   
7.         for(var i=1;i<rows.length;i++){ //遍历表格的行
   
8.            for(var j=0;j<rows[i].cells.length;j++){  //遍历每行的列
   
9.           // console.log("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].childNodes[0].value);
   
10.                  
    
11.                         if(!data_Valve[i-1]){
    
12.                 data_Valve[i-1] = new Array();
    
13.             }
    
14.             data_Valve[i-1][j] = rows[i].cells[j].childNodes[0].value;                       
    
15.                        
    
16.            }
    
17.         }

复制代码

遍历table下的input或select：

1. var data_Work = [];
   
2. var table=document.getElementById("myTable_Work");
   
3. 
   
4.         var rows=table.rows;
   
5.        // console.log(rows.length);//获取表格的行数
   
6. 
   
7.         for(var i=1;i<rows.length;i++){ //遍历表格的行
   
8.            for(var j=0;j<rows[i].cells.length-1;j++){  //遍历每行的列
   
9.            CN=rows[i].cells[j];
   
10.                   
    
11.                                   if(!data_Work[i-1]){
    
12.                                                 data_Work[i-1] = new Array();
    
13.                                         }
    
14.                          
    
15.                           
    
16.                                 if(CN.childNodes[0].nodeName=="#text"){                 
    
17.                                 sel=CN.getElementsByTagName("select")[0];  //如果是下拉列表，自动获取。
    
18.                                 //console.log(j,CN,CN.childNodes[0].nodeName)                       
    
19.                                 data_Work[i-1][j] = sel.options[sel.selectedIndex].text;       
    
20.                                 }
    
21.                                 else{
    
22.                                 CN=CN.childNodes[0];
    
23.                                 data_Work[i-1][j] = CN.value;               
    
24.                                 }       
    
25.                                
    
26.                    
    
27.                        
    
28.            }
    
29.         }       

复制代码