批量获取table 下 td 中的 input的值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pang_da_xing/article/details/75007030

由于用了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"/>
                    &nbsp;&nbsp;㎡，补偿标准
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data12" data-options="required:true"  style="width:50px;height:18px"/>
                    &nbsp;&nbsp;元/㎡，补偿费
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data13" data-options="required:true"  style="width:60px;height:18px"/>
                    &nbsp;&nbsp;元
                    </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"/>
                    &nbsp;&nbsp;㎡，补偿标准
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data22" data-options="required:true"  style="width:50px;height:18px"/>
                    &nbsp;&nbsp;元/㎡，补偿费
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data23" data-options="required:true"  style="width:60px;height:18px"/>
                    &nbsp;&nbsp;元</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"/>
                    &nbsp;&nbsp;㎡，补偿标准
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data32" data-options="required:true"  style="width:50px;height:18px"/>
                    &nbsp;&nbsp;元/㎡，补偿费
                    <input class="easyui-numberbox textbox" min="0.01"  max="100000000" precision="2"   missingMessage="只能输入数字"  name="data33" data-options="required:true"  style="width:60px;height:18px"/>
                    &nbsp;&nbsp;元</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;

    }

}