Have a look at https://jsfiddle.net/nt56wuox/3/ for a basic example in pure javascript and HTML.
Html
<html>
<body>
<input id='inAttr' type='text' placeholder='Enter attr' >
<button onClick='calculate(document.getElementById("inAttr").value)' > Show table </button>
<div id='result'> </div>
</body>
</html>
Javascript
data = [
{code:'101' , attr:'Body' , attr_value: 'SS04'},
{code:'102' , attr:'Body' , attr_value: 'SS04'},
{code:'103' , attr:'Float' , attr_value: 'SS0X'},
{code:'104' , attr:'Spring' , attr_value: 'SS0X'},
]
function calculate(attr){
const tableData = data
.filter(row=>row.attr === attr)
console.log({attr, tableData});
var html = '<table>';
html+=`<tr><th>Code</th><th>${attr}</th></tr>`
tableData.forEach(row=>{
html+=`<tr><td>${row.code}</td><td>${row.attr_value}</td></tr>`
})
html += '<table>';
document.getElementById('result').innerHTML = html;
return tableData;
}
You might want to consider reading about HTML, JS and JSON and perhaps one of the common frameworks such as Angular / React
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
