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

来源：互联网发布：java软件开发面试题编辑：程序博客网时间：2024/05/19 06:36

由于用了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;    }}

阅读全文

0 0