[英]How to convert value from HTML table to JSON array in javascript
<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 數組是我需要的示例格式
你可以試試這個：
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
}
這將完成工作：
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的菜單。
如何將 HTML 表中的值轉換為 javascript 中的 JSON 數組，不包括最后一行中的任何輸入是否為空
[英]How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty
How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty and get numbers as integer in json
[英]How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty and get numbers as integer in json
如何動態地從html表中的javascript數組中獲取值
[英]How to get the value from a javascript array in html table dynamically
如何使用 javascript 將此 json 數據轉換為 html 表？
[英]How can I convert this json data to html table with javascript?
如何使用解析的JSON使用Javascript轉換為html表
[英]How to used parsed JSON to convert into html table using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.