从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>

我在做什么

在这里我已经得到整个Html表的值使用(地图)

例子

新库存tbody> <<tr>

商品名称	旧库存	总库存	qrt
新鲜羊肉,咖喱削减	20	10	30
珠穆朗玛峰——Kasur Methi	0	10	10
新鲜椰奶150毫升	10	10	20
Sakthi——鸡马沙拉	20	10	30
羊骨头——普通的汤包	0	10	10

您已经拥有了实现目标所需的所有逻辑，您只需要提供一种访问它的方法。在下面的代码片段中，我将现有的scan()函数拆分为可重用的实用函数:object_from_row()接受tr元素并返回基于您的逻辑的对象，display_row_data()将在DOM中显示行数据。

这只是一个问题链接你的getting row with ID按钮到object_from_row()功能。在我取代了你的按钮的代码片段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，并在select的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>

我在做什么

相关内容

最新更新

热门标签：