js获取Table表格中input的值

1、js获取Table表格中input的值

• 获取Table表格中input的值网络上有大量的例句，但都不符合作者要求，于量就写了一个通用的方法供参考。也许你会用得上，还有本人在今后的项目中也可能再次用得上就写下如下内容。
• 本人的项目中有这样一种结构。Table表格每一个单元格的子节点都有一个Input标签，这些标签内容是可以随意修改的。例数只有两列。如下图所示

1、 获取Table表格单元中子标签input的值

本例的思想是只获取有值的单元格，对于没有值的单元格不被录取。
下面展示一些 js代码片。

/**
 * @function 获取Table单元格Input的值
 * @param {string} 参数 tableId 
 * @returns 返回数组
 * @desription 说明：参数为Table的id值
 */
function getTableValue(tableId) {
    
    
    var tableArr = [];
    var name;
    var val;
    var obj = document.getElementById(tableId);
    //循环Table行数  
    for (var i = 0; i < obj.rows.length; i++) {
    
    
        if (obj.rows[i].cells[0].childNodes[0].value) {
    
    
            name = obj.rows[i].cells[0].childNodes[0].value
        }
        if (obj.rows[i].cells[1].childNodes[0].value) {
    
    
            val = obj.rows[i].cells[1].childNodes[0].value;
        }
        if (name && val) {
    
    
            var cellVal = {
    
     "name": name, "val": val };
            tableArr.push(cellVal);
        }
    }
    //console.log('tableArr', tableArr);
    return tableArr;
}

获取结果如图二所示：

2、调用方法

下面展示一些 js代码片。

var tableId = "tablePop";
var tableVal = getTableValue(tableId);

3、说明

调用方法中的参数为table标签的id 。因为本人的项目中有很多的表格需要多次调用所以写了一个通用方法
下面展示一些 Html代码片。

<table class="table table-bordered border-primary mt-2 table-responsive" id="tablePop">
     <tr class="m-0 p-0">
        <td class="m-0 p-0"><input class="form-control m-0 p-0" type="text"  style="font-size: 12px;" value=""></td>
        <td class="m-0 p-0"><input class="form-control m-0 p-0" type="text"  style="font-size: 12px;" value=""></td>
     </tr>
 </table>

4、后记

对于获取所有单元格内容就更加的简单，只需加一个列循环即可。