HTML JS获取到table中所有的input的值 传递到前端

Posted 2020-09-16 超灬超

1.获取table对象

2.行循环、列循环然后遍历每一个格子里面的input值

3.用连接符连接

4.放置到form的隐藏域里面。

5.传递到后台。

js代码：注意：1.input必须跟[0]否则无法取出值  2.在JS的双引号里面不能在用“”改成‘‘而且{}在引号里也会被识别报错。将字符串传回后台处理即可

function GetInfoFromTable() {
          var tableInfo = "";
          var tableObj = document.getElementById("booktable");
        //  alert(tableObj.rows.length);
          //从第二行开始获取数据
          for (var i = 2; i < tableObj.rows.length; i++) {  //遍历Table的所有Row
            for (var j = 0; j < tableObj.rows[i].cells.length; j++) {  //遍历Row中的每一列
              tableInfo += tableObj.rows[i].cells[j].getElementsByTagName("input")[0].value;  //获取Table中单元格的内容
              tableInfo += ",";
            }
          }
          alert (tableInfo);
        }        
         function AddTableRow()  
            {  
                var Table = document.getElementById("booktable");   //取得自定义的表对象  
                NewRow = Table.insertRow();                        //添加行  
                NewCell1= NewRow.insertCell();                     //添加列  
                NewCell2=NewRow.insertCell();  
                NewCell3=NewRow.insertCell(); 
                NewCell4=NewRow.insertCell(); 
                NewCell2.colSpan=2;
                NewCell1.innerhtml = "<input required=‘required‘ type=‘text‘/>";          //添加数据  
                NewCell2.innerHTML="<input required=‘required‘ type=‘text‘/>";
       
                NewCell3.innerHTML="<input required=‘required‘ onkeyup=‘JHshNumberText(this)‘ />";  
                NewCell4.innerHTML="<input required=‘required‘ onkeyup=‘JHshNumberText(this)‘ />";  
            }             
    </script>