javascript - 从 html 表中的特定行获取值并作为 json 数组获取
问题描述
function scan() {
const res = [...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr =>
Object.fromEntries(
[...tr.querySelectorAll("input")].slice(1).map(inp => [inp.id.replace(/.*inboundedit/, "").replace(/\d+$/, ""), inp.value])));
document.getElementById("some").innerHTML = JSON.stringify(res);
}<!DOCTYPE html>
<html>
<body>
<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 id="rowone">
<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 id="rowtwo">
<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 id="rowthree">
<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 id="rowfour">
<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 id="rowfive">
<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>
<button onclick="scan()">Scan The Table</button>
<button >getting row with id</button>
<br><span id="some"></span>
<script>
</script>
</body>
</html>我在做什么
- 在这里，我一直在使用 (Map) 获取整个 Html 表值的值
例子
| 项目名称 | 旧货 | 新库存 | 总库存 | qrt |
|---|---|---|---|---|
| 新鲜山羊肉 - 咖喱切块 | 20 | 10 | 30 | |
| 珠穆朗玛峰 - Kasur Methi | 0 | 10 | 10 | |
| 新鲜椰奶 150 毫升 | 10 | 10 | 20 | |
| Sakthi - 鸡肉咖喱 | 20 | 10 | 30 | |
| 山羊骨头 - 普通汤包 | 0 | 10 | 10 |
json数组格式
[{"itemname":"新鲜山羊肉 - 咖喱切块","oldstock":"20","newstock":"10","totalstock":"30","qty":""},{"itemname ":"珠穆朗玛峰 - Kasur Methi","oldstock":"0","newstock":"10","totalstock":"10","qty":""},{"itemname":"新鲜椰奶150 ml","oldstock":"10","newstock":"10","totalstock":"20","qty":""},{"itemname":"Sakthi - Chicken Masala","oldstock ":"20","newstock":"10","totalstock":"30","qty":""},{"itemname":"山羊骨头 - 普通汤包","oldstock":"0","newstock":"10","totalstock":"10","qty":""}]
描述
1.在上表中，我切掉了第一列（其中有 sl.no ）并切掉了最后一列中的编辑按钮，我只得到标签值
我需要什么
- 我想使用 ID (rowID) (rowtwo) 作为 json 数组从第二行（或任何行）获取值
ID=rowtwo
例子
| 项目名称 | 旧货 | 新库存 | 总库存 | qrt |
|---|---|---|---|---|
| 珠穆朗玛峰 - Kasur Methi | 0 | 10 | 10 |
json数组格式
["itemname":"Everest - Kasur Methi","oldstock":"0","newstock":"10","totalstock":"10","qty":""}]
欺骗
- 我只需要获取带有 rowID 的特定行，而不是获取整个表
解决方案
您拥有实现目标所需的所有逻辑，您只需要提供一种访问它的方法。在下面的代码片段中，我将您现有的scan()函数拆分为可重用的实用函数：object_from_row()它接受一个tr元素并根据您的逻辑返回一个对象display_row_data()，并将在 DOM 中显示行数据。
然后只需将getting row with ID按钮链接到该object_from_row()功能即可。在代码段中，我用 a 替换了您的按钮，并用表格中的select每个按钮填充了它。tr
// populate row select
const row_select = document.getElementById('row-select');
const option_fragment = document.createDocumentFragment();
document.querySelectorAll('#stockinboundedittable tr').forEach((tr) => {
if (tr.id) {
const opt = document.createElement('option');
opt.value = tr.id;
opt.textContent = `Row ${tr.id.replace('row', '')}`;
option_fragment.appendChild(opt);
}
});
row_select.appendChild(option_fragment);
并定义了一个get_row_data()接受 id 并change在选择时触发的函数。
function get_row_data(row_id) {
const row = document.getElementById(row_id);
const res = [object_from_row(row)];
display_row_data(res);
}
row_select.addEventListener('change', (e) => {
get_row_data(e.target.value);
});
需要注意的是，这里没有 JSON，只有 javascript 对象。
// declare functions
function display_row_data(data) {
document.getElementById('some').innerHTML = `<pre>${JSON.stringify(
data,
null,
2,
)}</pre>`;
}
function object_from_row(tr) {
return Object.fromEntries(
[...tr.querySelectorAll('input')]
.slice(1)
.map((inp) => [
inp.id.replace(/.*inboundedit/, '').replace(/\d+$/, ''),
inp.value,
]),
);
}
function scan() {
const res = [...document.querySelectorAll('#stockinboundedittable tr')]
.slice(1)
.map(object_from_row);
display_row_data(res);
}
function get_row_data(row_id) {
const row = document.getElementById(row_id);
const res = [object_from_row(row)];
display_row_data(res);
}
// init functionality
const scan_button = document.getElementById('scan');
const row_select = document.getElementById('row-select');
// populate row select
const option_fragment = document.createDocumentFragment();
document.querySelectorAll('#stockinboundedittable tr').forEach((tr) => {
if (tr.id) {
const opt = document.createElement('option');
opt.value = tr.id;
opt.textContent = `Row ${tr.id.replace('row', '')}`;
option_fragment.appendChild(opt);
}
});
row_select.appendChild(option_fragment);
// attach listeners
scan_button.addEventListener('click', scan);
row_select.addEventListener('change', (e) => {
get_row_data(e.target.value);
});<!DOCTYPE html>
<html>
<body>
<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 id="rowone">
<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 id="rowtwo">
<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 id="rowthree">
<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 id="rowfour">
<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 id="rowfive">
<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>
<button type="button" id="scan">Scan The Table</button>
<select name="get-row" id="row-select">
<option disabled selected value>Get row data</option>
</select>
<br><span id="some"></span>
<script>
</script>
</body>
</html>推荐阅读
- node.js - 如何让函数等待数据出现在数据库中？节点JS
- ag-grid - AG-Grid：如何识别行中的最后一个单元格？
- kubernetes - 处理与外部 Microsoft SQL VM 集群的连接的正确方法
- ios - Apple 发送的崩溃日志无法正确符号化
- python - jupyter 控制台中显示的度量值与 Tensorboard 显示的不匹配
- java - Java 8 Map with optional key to map with value of optional as key
- php - 缺少附件 .pdf 扩展名的传入电子邮件
- sql - 当小数点后出现零时在 Presto 中截断
- android-studio - 如何在 Android Studio 4.2 上导入 .AAR 模块
- networking - GCP - 没有 Cloud NAT，但给定公共 IP 离开 VPC