如何从表中的文本框中获取值并使用 javascript 更新它答案

【问题标题】：how to get the value from textbox in table and update it using javascript如何从表中的文本框中获取值并使用 javascript 更新它
【发布时间】：2017-07-04 01:14:00
【问题描述】：

<!DOCTYPE html>
   
    <script>
    function m(){
var tb=document.getElementById("w");
        var len=tb.rows.length;
        var b=[];
        
        for(var i=1;i<len;i++)
        {    
b[ i ] = parseInt( tb.rows[ i ].cells[ 4 ].querySelector('input').value ) * parseInt( tb.rows[ i ].cells[ 5 ].querySelector('input').value );

        
    document.getElementById("w").rows[i].cells[6].innerHTML=b[i];
        
        }
        
    }
        
    
    </script>
    
    
</body>
</html>

我是 javascript 新手！我尝试从表中的文本框中获取值并动态更新 linetotal，但我得到的输出为 NaN。任何人都可以纠正错误！

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

您正在尝试访问表格单元格上的.value。您需要访问表格单元格内的input 字段。

您需要使用.querySelector('input').value 而不仅仅是.value

b[ i ] = parseInt( tb.rows[ i ].cells[ 4 ].querySelector('input').value ) * parseInt( tb.rows[ i ].cells[ 5 ].querySelector('input').value );

我真的推荐使用 jQuery。它会让生活变得更轻松！ Vanilla Javascript 难以使用和维护 - 即使是最优秀的开发人员也是如此。

【讨论】：

你能编辑一下代码让我得到正确的吗？这样会很容易理解
这里是对现有代码的快速修改codepen.io/jamespoel/pen/dReNXW
另外，如果您打算使用小数价格（例如 3.50），则需要使用 parseFloat 而不是 parseInt；如果你使用parseInt，它会将值四舍五入
嘿，它在 linetotal 中显示了一个 Nan ？如何将其更改为零？@james

【解决方案2】：

function m(){
  var tb=document.getElementById("w");
    var len=tb.rows.length;
    var b=[];
    for(var i=1;i<len;i++) {
      var qty = tb.rows[i].cells[4].querySelector('input').value,
          price =  tb.rows[i].cells[5].querySelector('input').value;
      console.log(qty);
      if(qty != "" && price != "") {
        b[i]=parseInt(qty)*parseInt(price);
      } else {
        b[i] = "None";
      }
      tb.rows[i].cells[6].innerHTML=b[i];
    }
  }

您需要使用querySelector('input').value 而不是.value。我添加了一个 if 语句来检查两个字段是否不为空，如果是，则结果将为“空”。您可以将“失败字符串”编辑为您想要的任何内容。

【讨论】：

【解决方案3】：

看看这个：https://jsfiddle.net/abhiphirke/joq3jLk5/3/

在字段中填写值，然后点击Click Me! 按钮。如果你不这样做，你会得到 NaN。玩得开心！

【讨论】：