国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

/*
  在計(jì)算平均數(shù)時(shí)使用的實(shí)用回調(diào)函數(shù)。
  
  reducer用于A(yíng)rray.reduce()方法。
  average用于A(yíng)rray.map()方法。
*/
const reducer=(a,c)=>a+c;
const average=(n)=>parseFloat( n.value ) / 2 || 0;


/*
  綁定到文檔（或適當(dāng)?shù)母冈兀┑奈惺录O(jiān)聽(tīng)器
  監(jiān)聽(tīng)并處理來(lái)自文本輸入的keyup事件。在實(shí)踐中，這個(gè)條件可以（應(yīng)該）更加具體。
*/
const keyuphandler=(e)=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='text' ){
    /*
      使用EVENT來(lái)識(shí)別感興趣的HTML元素。
    */
    let table=e.target.closest('table');
    let tr=e.target.closest('tr');
    
    let group=tr.dataset.group;
    let elem=e.target.dataset.elem;
    /*
      使用上述變量，現(xiàn)在可以很容易地識(shí)別HTML中的其他元素，
      因?yàn)槲覀冎懒薲ataset屬性
      - 請(qǐng)注意，HTML具有多個(gè)data-name類(lèi)型的屬性，
      用于根據(jù)化學(xué)類(lèi)型和表行相關(guān)輸入。
      
      inputs是一個(gè)節(jié)點(diǎn)列表，不是數(shù)組，所以必須將其轉(zhuǎn)換為數(shù)組，
      以便我們可以使用數(shù)組方法“map”和“reduce”
      這是使用“splat”或展開(kāi)運(yùn)算符...完成的
      
    */
    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`);
    /*
      使用數(shù)組方法對(duì)輸入值進(jìn)行計(jì)算，并將結(jié)果分配給正確標(biāo)識(shí)的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;}

<!--
  注意：輸入元素的名稱(chēng)在任何計(jì)算中都沒(méi)有起作用，
  因此從以下內(nèi)容中刪除了這些名稱(chēng)。
-->

<table>
  <tr>
    <th>%<br />Sulphur</th>
    <th>%<br />Carbon</th>
    <th>Average<br />Sulphur</th>
    <th>Average<br />Carbon</th>
  </tr>
  
  <tr data-group=1>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=1>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  
  <tr data-group=2>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=2>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  
  <!-- 
    只需更改任何添加的附加表行對(duì)的data-group值，
    就可以輕松擴(kuò)展此內(nèi)容。
    例如：
    
  <tr data-group=3>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=3>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  -->
</table>

Saya tahu anda baru menggunakan JavaScript, jadi kebanyakan perkara yang anda lihat di sini mungkin sangat menakutkan dan mengelirukan. Namun, apabila pengetahuan anda berkembang, anda diharapkan akan mendapat nilai dalam beberapa teknik yang dibentangkan di sini - tetapi jika anda mempunyai soalan, jangan ragu untuk bertanya!