JS找到table下的所有类名相同的标签并获取值

暗起幻蓝

于 2023-04-24 09:43:35 发布

阅读量347

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64593363/article/details/130335727

版权

<table id="tableF" border="1" style="width:100%" cellspacing="0" cellpadding="0">
 <tr class="goods">
                    <td><input name="goodsname" id=" Name" type="text" style="width:100%;height:100%"  placeholder="货物名称"></td>
                    <td><input name="goodsnumbers" id="Number" type="text" style="width:150px;height:100%" placeholder="数量"></td>
                    <td><input name="goodsstyle" id="specification" type="text" style="width:150px;height:100%" placeholder="规格"></td>
                    <td><input name="nameweight" id="Weight" type="text" style="width:150px;height:100%" placeholder="重量(KG)"></td>
                    <td><input name="namevolume" id="Volume" type="text" style="width:150px;height:100%" placeholder="体积(立方)"></td>
                </tr>
 <tr class="goods">
                    <td><input name="goodsname" id=" Name" type="text" style="width:100%;height:100%"  placeholder="货物名称"></td>
                    <td><input name="goodsnumbers" id="Number" type="text" style="width:150px;height:100%" placeholder="数量"></td>
                    <td><input name="goodsstyle" id="specification" type="text" style="width:150px;height:100%" placeholder="规格"></td>
                    <td><input name="nameweight" id="Weight" type="text" style="width:150px;height:100%" placeholder="重量(KG)"></td>
                    <td><input name="namevolume" id="Volume" type="text" style="width:150px;height:100%" placeholder="体积(立方)"></td>
                </tr>
 <tr class="goods">
                    <td><input name="goodsname" id=" Name" type="text" style="width:100%;height:100%"  placeholder="货物名称"></td>
                    <td><input name="goodsnumbers" id="Number" type="text" style="width:150px;height:100%" placeholder="数量"></td>
                    <td><input name="goodsstyle" id="specification" type="text" style="width:150px;height:100%" placeholder="规格"></td>
                    <td><input name="nameweight" id="Weight" type="text" style="width:150px;height:100%" placeholder="重量(KG)"></td>
                    <td><input name="namevolume" id="Volume" type="text" style="width:150px;height:100%" placeholder="体积(立方)"></td>
                </tr>

</table>

通过遍历table标签的相同goods类实现对每一个不同name的input的值的获取。并添加到数组里

 let goods=[];
        $("#tableF").find(".goods").each(function () {
            let good = {
                "Name": "",
                    "Number": "",
                        "specification": "",
                            "Weight": "",
                                "Volume": ""
            }
            good["Name"] = (this.querySelector('input[name="goodsname"]').value);
            good["Number"] = (this.querySelector('input[name="goodsnumbers"]').value);
            good["specification"] = (this.querySelector('input[name="goodsstyle"]').value);
            good["Weight"] = (this.querySelector('input[name="nameweight"]').value);
            good["Volume"] = (this.querySelector('input[name="namevolume"]').value);
            goods.push(good)
            
        })