如何将值从 HTML 表转换为 javascript 中的 JSON 数组

Question

    <table style="width:100%;   border-collapse: collapse;  text-align: center;" id="stockinboundedittable">
      
        <tr>
          <th style="display:none;">subcategory</th>
          <th>Sl.No</th>
          <!--<th>I.U.Code</th>-->
          <th>Item Name</th>
          <th> old stock</th>
          <th> new stock</th>
          <th> Total Stock</th>
          <th> qrt</th>
          <th>Edit</th>
        </tr>
     
      <tr>
        <td style="display:none;">tmcsubctgy_2</td>
        <td>
          <input style="    width: 100%;" id="slno1editinbound1" value="1" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
        </td>
        <td>
        <input style="    width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="inboundeditqty1">
        </td>
        <td>
          <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
        </td>
      </tr>
      <tr>
        <td style="display:none;">tmcsubctgy_5</td>
        <td>
          <input style="    width: 100%;" id="slno1editinbound2" value="2" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditoldstock2" value="0" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
        </td>
        <td>
        <input style="    width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="inboundeditqty2">
        </td>
        <td>
          <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
        </td>
      </tr>
      <tr>
        <td style="display:none;">tmcsubctgy_13</td>
        <td>
          <input style="    width: 100%;" id="slno1editinbound3" value="3" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
        </td>
        <td>
        <input style="    width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="inboundeditqty3">
        </td>
        <td>
          <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
        </td>
      </tr>
      <tr>
        <td style="display:none;">tmcsubctgy_5</td>
        <td>
          <input style="    width: 100%;" id="slno1editinbound4" value="4" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
        </td>
        <td>
        <input style="    width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="inboundeditqty4">
        </td>
        <td>
          <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
        </td>
      </tr>
      <tr>
        <td style="display:none;">tmcsubctgy_2</td>
        <td>
          <input style="    width: 100%;" id="slno1editinbound5" value="5" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditoldstock5" value="0" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
        </td>
        <td>
        <input style="    width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
        </td>
        <td>
          <input style="    width: 100%;" id="inboundeditqty5">
        </td>
        <td>
          <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
        </td>
      </tr>
      </table>
    </table>

##我需要读取标签内的值并将其保存为带有 sl.no 的 json 数组，并在 json 数组中排除编辑按钮##

[{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"},
{"itemname":"Chicken Drumstick","oldstock":"10","newstock":"10","totalstock":"20"},
{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"}]

*上面的 json 数组是我需要的示例格式

• 我需要从整个表中循环读取它

Answer 1

你可以试试这个：

   function table_to_array(table_id) {
            myData = document.getElementById(table_id).rows
            //console.log(myData)
            my_liste = []
            for (var i = 0; i < myData.length; i++) {
                    el = myData[i].children
                    my_el = []
                    for (var j = 0; j < el.length; j++) {
                            my_el.push(el[j].innerText);
                    }
                    my_liste.push(my_el)

            }
            return my_liste
    }

Answer 2

这将完成工作：

 const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=> [...tr.querySelectorAll("input")].slice(0).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value])).reduce((a,c)=>{ a[c[0][1]]= Object.fromEntries(c.slice(1)); return a},{}); console.log(res[2]);

 <table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable"> <tr> <th style="display:none;">subcategory</th> <th>Sl.No</th> <.--<th>IU:Code</th>--> <th>Item Name</th> <th> old stock</th> <th> new stock</th> <th> Total Stock</th> <th> qrt</th> <th>Edit</th> </tr> <tr> <td style="display;none:">tmcsubctgy_2</td> <td> <input style=" width; 100%:" id="slno1editinbound1" value="1" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock1" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock1" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock1" value="30" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty1"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut1">EDIT</button> </td> </tr> <tr> <td style="display;none:">tmcsubctgy_5</td> <td> <input style=" width; 100%:" id="slno1editinbound2" value="2" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock2" value="0" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock2" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock2" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty2"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut2">EDIT</button> </td> </tr> <tr> <td style="display;none:">tmcsubctgy_13</td> <td> <input style=" width; 100%:" id="slno1editinbound3" value="3" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock3" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock3" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock3" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty3"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut3">EDIT</button> </td> </tr> <tr> <td style="display;none:">tmcsubctgy_5</td> <td> <input style=" width; 100%:" id="slno1editinbound4" value="4" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock4" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock4" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock4" value="30" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty4"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut4">EDIT</button> </td> </tr> <tr> <td style="display;none:">tmcsubctgy_2</td> <td> <input style=" width; 100%:" id="slno1editinbound5" value="5" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock5" value="0" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock5" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock5" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty5"> </td> <td> <button style="background; #fdd110: width; 100%;" id="stockinboundeditditbut5">EDIT</button> </td> </tr> </table> </table>

我有一个嵌套的.map()循环，它将收集每个输入字段的id s 和value s（每行中的第一个除外）。 然后Object.fromEntries()调用会将内部 arrays 组装回对象，使用第一个数组元素作为键，第二个元素作为值。

我的回答也不返回 JSON 字符串，而是返回一个对象数组。 如果您真的想要 JSON 字符串，只需通过JSON.stringify()即可。

更新
根据 OP 的最新评论，我更新了我的答案。 我现在使用第一列作为“Id-key”并创建一个 object 对象而不是对象数组。 Id-key 可用于单独寻址每个菜单，如我的示例console.log()所示，我在其中选择了带有 Id-key 2的菜单。