table 表里想让 第2列乘以第3列求和，再将数据打在第4列，然后让第四列做和，麻烦大神

Question

麻烦大神帮帮忙，新手求帮助 正在学习js table 表里想让 第2列乘以第3列将数据打在第4列，然后让第四列做和，麻烦大神，
table表贴出来了

<table border="1px" style="width: 100%; height: 100%; border-spacing: 0rem; text-align: center;" >
                         <tr>
                           <th>评核项目</th>
                           <th>得分(0-100分)</th>
                           <th>权重</th>
                           <th>得分</th>
                         </tr>
                         <tr>
                           <td>仪表举止</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>专业素质</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="30%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>逻辑思维</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="20%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>敬业精神</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>沟通协调能力</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>组织管理能力</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>应变能力</td>
                           <td><input class="" style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                         <tr>
                           <td>总计</td>
                           <td><input class="" value="—— ——" readonly = "readonly"style="width: 100%;height: 100%;border: 0px;"/></td>
                           <td><input class="" value="10%" readonly = "readonly"id="numb" style="width: 100%;height: 100%;border: 0px;"/> </td>
                           <td><input class=""  id="total" readonly = "readonly"  style="width: 100%;height: 100%;border: 0px;"/> </td>
                         </tr>
                       </table>

麻烦大神帮帮忙

Answer 1

下班了，先上代码，有什么其他问题明天再说...

((urTable)=>{
  let trs = urTable.querySelectorAll('tr');
  let total = urTable.querySelector('tr:last-child>td:last-child>input');
  for(let k = 1,len = trs.length - 1; k<len ;k++){
    let input_1 = trs[k].querySelector('td:nth-child(2)>input');
    if(!input_1){
      continue
    }
    let power = trs[k].querySelector('td:nth-child(3)>input'),
    grade = trs[k].querySelector('td:nth-child(4)>input');
    input_1.onchange = ()=>{
      grade.value = event.target.value * parseFloat(power.value.replace('%')) / 100
      trs[k].querySelector('td:nth-child(4)>input')
      total.value = 0
      total.value = Array.from(
        urTable.querySelectorAll('tr>td:nth-child(4)>input')
      ).reduce((all, {value} )=>{
        return all+parseFloat(value||0)
      }, 0);
    }
  }
})(document.querySelector('table'));// 传入你的table