如何使用javascript添加TD中输入的每个值？

我有一个行和列的列表。基本上，第一个_值和第二个_值列是用户可以输入的输入类型，

total

列是一个范围。如何将第一个_值和第二个_值列添加到其特定行

ID|    first_value |    second value |     total
1        0                 50                50
2        20                0                 20
3        10                0                 10
4        20                10                30
5        10                0                 10

---

我已经可以得到用户点击TD的id，但我不知道如何实现这个计算，我的意思是如何计算并显示到它在第行中的特定位置。任何帮助都将不胜感激。

要实现这一点，您可以使用jQuery的DOM遍历方法查找与引发事件的

输入相关的
span
。具体来说，请使用
此
参考以及
最近的（）
和
查找（）

还要注意，最好在重复内容上使用公共类，而不是生成动态
id
属性。试试这个：


$（'.first，.second'）。在（'input'，function（）上{
var$tr=$（this.closest（'tr'）；
var f=parseFloat（$tr.find（'.first'）.val（））|0；
var s=parseFloat（$tr.find（'.second'）.val（））|0；
$tr.find（'.total'）.text（f+s）；
});

#
第一值
第二值
全部的
1.
2.
使用香草js和不使用PHP的快速示例

<table class="table table-striped" id="user_set_goal_table" width="50%">
   <thead style="text-align:left;">
       <tr>
          <th>#</th>
          <th>First_value</th>
          <th>Second_value</th>
          <th>total</th>
    </thead>
    <tbody>
    </tbody>
</table>

<script>

    // table body
    let tbody =  document.querySelectorAll('table tbody')[0];
    // trs
    let rows  = tbody.children;

    // fill table body
    for(let j = 0; j < 16; j++)
    {
        tbody.innerHTML += `
            <td>${j}</td>
            <td><input type="text" class="first"></td>
            <td><input type="text" class="second"></td>
            <td><span></span></td>
        `;
    }

    for(let i = 0; i < rows.length; i++)
    {
        let firstInput  = rows[i].children[1].firstElementChild;
        let secondInput = rows[i].children[2].firstElementChild;
        let total       = rows[i].children[3].firstElementChild;

        [firstInput, secondInput].forEach((elem) => {

            elem.addEventListener('input' ,(e) => {

                let first     = e.target.value;
                let second  = (e.target.className == "first") ? secondInput.value : firstInput.value;

                total.innerText = parseFloat(first) + parseFloat(second);
            });

        });
    }


#
第一值
第二值
全部的
//桌体
让tbody=document.queryselectoral（'table tbody'）[0]；
//trs
让rows=tbody.children；
//填表体
对于（设j=0；j<16；j++）
{
tbody.innerHTML+=`
${j}
`;
}
for（设i=0；i{
元素addEventListener（'输入'，（e）=>{
让第一个=e.target.value；
让second=（e.target.className=“first”）？secondInput.value:firstInput.value；
total.innerText=parseFloat（第一个）+parseFloat（第二个）；
});
});
}


结果：

由于您知道所单击元素的td，因此可以通过节点向上导航到父行和父表。用于将其放置在所需位置。
javascript code:

    $('.navigate_TD_ID').on('change', function() {
        var input_id = $(this).attr('id');
        alert(input_id);
    });

<table class="table table-striped" id="user_set_goal_table" width="50%">
   <thead style="text-align:left;">
       <tr>
          <th>#</th>
          <th>First_value</th>
          <th>Second_value</th>
          <th>total</th>
    </thead>
    <tbody>
    </tbody>
</table>

<script>

    // table body
    let tbody =  document.querySelectorAll('table tbody')[0];
    // trs
    let rows  = tbody.children;

    // fill table body
    for(let j = 0; j < 16; j++)
    {
        tbody.innerHTML += `
            <td>${j}</td>
            <td><input type="text" class="first"></td>
            <td><input type="text" class="second"></td>
            <td><span></span></td>
        `;
    }

    for(let i = 0; i < rows.length; i++)
    {
        let firstInput  = rows[i].children[1].firstElementChild;
        let secondInput = rows[i].children[2].firstElementChild;
        let total       = rows[i].children[3].firstElementChild;

        [firstInput, secondInput].forEach((elem) => {

            elem.addEventListener('input' ,(e) => {

                let first     = e.target.value;
                let second  = (e.target.className == "first") ? secondInput.value : firstInput.value;

                total.innerText = parseFloat(first) + parseFloat(second);
            });

        });
    }