/* 在计算平均数时使用的实用回调函数。 reducer用于Array.reduce()方法。 average用于Array.map()方法。 */ const reducer=(a,c)=>a+c; const average=(n)=>parseFloat( n.value ) / 2 || 0; /* 绑定到文档（或适当的父元素）的委托事件监听器 监听并处理来自文本输入的keyup事件。在实践中，这个条件可以（应该）更加具体。 */ const keyuphandler=(e)=>{ if( e.target instanceof HTMLInputElement && e.target.type=='text' ){ /* 使用EVENT来识别感兴趣的HTML元素。 */ let table=e.target.closest('table'); let tr=e.target.closest('tr'); let group=tr.dataset.group; let elem=e.target.dataset.elem; /* 使用上述变量，现在可以很容易地识别HTML中的其他元素， 因为我们知道了dataset属性 - 请注意，HTML具有多个data-name类型的属性， 用于根据化学类型和表行相关输入。 inputs是一个节点列表，不是数组，所以必须将其转换为数组， 以便我们可以使用数组方法“map”和“reduce” 这是使用“splat”或展开运算符...完成的 */ let result=table.querySelector(`tr[data-group="${group}"] input[data-elem="${elem}"].result`); let inputs=table.querySelectorAll(`tr[data-group="${group}"] input[data-elem="${elem}"].input`); /* 使用数组方法对输入值进行计算，并将结果分配给正确标识的input.result元素。 */ result.value = [...inputs] .map( average ) .reduce( reducer, 0 ) } }; document.addEventListener('keyup',keyuphandler);

table { width: 50px; box-sizing:border-box; border: 1px solid black; border-collapse: collapse; font-family:monospace } td { border: 1px solid black; padding: 0px; font-size: 10px; } th { border: 1px solid black; padding: 0px; } form { width: 4px; } div { display: grid; } label { display: block; width: 4px; font-size: 14px; } input [type="date"] { width: 4px; } /* 以下仅用于美化 示例 ;-) */ table { box-sizing:border-box; font-family:monospace } td,th{padding:0.25rem;} [data-elem='carbon']{background:rgba(0,0,100,0.1)} [data-elem='sulphur']{background:rgba(0,100,0,0.1)} [readonly]{background:rgba(255,0,0,0.1)} .input{width:3rem} .result{width:3.5rem} input{border:1px solid grey;padding:0.2rem;}

 
 
 
%
Sulphur
 
%
Carbon
 
Average
Sulphur
 
Average
Carbon
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

我知道您是JavaScript的初学者，所以您在这里看到的大部分内容可能会非常令人生畏和困惑。尽管如此，随着您的知识增加，您希望能从这里展示的一些技术中找到价值 - 但如果您有问题，可以随时提问！