请问如何把单独把每个input取到值 然后加起来放到总分处?

人员较多所以 input是循环出来的 不知道怎么能通过name单独拿到对应每个人的3个分数进行相加。
图片说明

图片说明

function getSunyw(ind){
    var score1 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[0].value;
    document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerText = score1 +"分";
    console.log(score1);
}

function getSungz(ind){
var score2 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[1].value;
document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerText =score2 +"分";
console.log(score2);
}

function getSuntd(ind){
    var score3 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[2].value;
    document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerText = score3 +"分";
    console.log(score3);
}
<tr>
      <td>测试1</td>
      <td><input type="text" placeholder="请输入业务能力分" name="yw[]" onchange="getSunyw(1)"></td>
      <td><input type="text" placeholder="请输入工作能力分" name="gz[]" onchange="getSungz(1)"></td>
      <td><input type="text" placeholder="请输入工作态度分" name="td[]" onchange="getSuntd(1)"></td>
      <td><span></span></td>
      <td><input type="text" placeholder="备注"></td>
</tr>

<tr>
      <td>测试2</td>
      <td><input type="text" placeholder="请输入业务能力分" name="yw[]" onchange="getSunyw(2)"></td>
       <td><input type="text" placeholder="请输入工作能力分" name="gz[]" onchange="getSungz(2)"></td>
       <td><input type="text" placeholder="请输入工作态度分" name="td[]" onchange="getSuntd(2)"></td>
       <td><span></span></td>
       <td><input type="text" placeholder="备注"></td>
</tr>

4个回答

给单项input添加onchange事件,用jquery的话就$(this).parents("tr").find("input[name='ye[]']").val()这样逐次获取三个输入框的值并相加,需要的话也可以parseInt()一下,
最后$(this).parents("tr").find("span").text(sum +"分")就能实现了,原生js的话找节点费劲些,用类似document.getElementsByTagName(name)[ind].value方法获取,建议加个ID,会省不少事,最后document...(合分的那块).innerText=sum + "分"
HTML:

<table id ="table">
    <tr><th>这行是表头</th></tr>
        <tr><td><input onchange="getSun(1);">这行是分值</td></tr>
            <tr><td>这行是分值</td></tr>
</table>

JS:

function getSumyw(ind){
    var score1 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[0].value;
         var score2 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[1].value;
         var score3 = document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("input")[2].value;
        (!score1)?0:score1;
        (!score2)?0:score2;
        (!score3)?0:score3;
        var sum = score1 + score2 +score3;
    document.getElementById("table_test").getElementsByTagName("tr")[ind].getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerText = sum +"分";
        console.log(score1);
}

qq_42285529
qq_42285529 回复拾年丶不久: 非常感谢!已经解决了!
7 个月之前 回复
qq_39062787
拾年丶不久 回复qq_42285529: 把你那三个方法换成这一个就行了,主要是记得判断一下三个分值是否为空
7 个月之前 回复
qq_42285529
qq_42285529 实在是不好意思,我在上面贴了下我先现在的代码 不太懂怎么样把3个数加起来放到span 现在的span会被之前的覆盖掉。
7 个月之前 回复
qq_39062787
拾年丶不久 回复qq_42285529: 等等我给上面添加上
7 个月之前 回复
qq_42285529
qq_42285529 回复拾年丶不久: 不好意思,还想请问下 按照上面的方法后可以拿到每个输入框的值,但是要如果赋给span?我试了下$(this).parents("tr").find("span").text(sum +"分")更改了一下好像不行,比较小白。。
7 个月之前 回复
qq_42285529
qq_42285529 回复拾年丶不久: 非常感谢!
7 个月之前 回复
qq_39062787
拾年丶不久 回复qq_42285529: 建议给table加个id,onchange事件传递个参数,参数值是当前行的行号,从你图上看,测试1所在行传1,2所在行传2,我去上面贴一点点代码你看看
7 个月之前 回复
qq_42285529
qq_42285529 先谢谢您的解答,也想过加ID 但是有差不多上百人 后台获取值可能比较麻烦.
7 个月之前 回复

jquery获取对应name相应兄弟节点的值相加即可

会用vue吗? 用vue来绑定数据, 修改了前面input, 总分就自动计算了;
或者用原生JS写的话, 记得用change事件, 或者onblur事件, 总分才能动态

遍历表格每一行,获取值相加,js直接给总分赋值

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐