Question

我遇到了JavaScript的问题，我是javascript的新手，刚刚开始将它与我的网络应用程序集成。我在这里有我的javascript：

<script type="text/javascript">

 function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
   var tot=0;

   for(var i=0;i<arr.length;i++){
      if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
   }
   document.getElementById('total').value = tot;
 }

</script>

这个addRow函数在这里作为我的函数添加一个单元格，每个类型我点击“添加条目”这里有点我的HTML：

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>     
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br></p>
  </fieldset></h3>
  </div><!-- COL5 END -->

我刚刚拿出了与此问题有关的HTML代码。我正在使用addRow（）来添加每个函数。第二列获取数值。例如。 200.00或232 r 2.2我想要做的是在我实时添加时获得总数。我已经在Mozilla浏览器的开发者选项中检查了单元格的添加，它显示数字正在下降到每个tr的第二个td。

所以我使用了var arr = document.querySelectorAll("#datatable td:nth-child(2)"); 在我的总计函数中希望我得到列表并进行评估。但是我无法做到这一点，我的整个用户界面中没有显示任何内容。或者......我真的在使用中得到了我的金额吗？当我使用复选框实现它时，这很有效，所以我知道它是如何工作的。每当我添加一个值时，只要添加了某些内容，它就会显示在总框中。但这里有所不同。我找到了一个答案，说nth-child获得非实时对象列表。我是否应该在对象总计之前对其进行评估？我真的被这部分困住了。如果您对如何解决这个问题有任何想法，请帮助我。或者，如果你能给我另一种方法来添加细胞，那么实时总计它也会有所帮助。

我可以使用提交类型，但页面会重新加载，用户再次向下滚动会很麻烦。应用程序的这一部分，当你添加一个单元格时，它只是弹出那里没有页面重新加载，为什么我用javascript来实现这个功能。

以下是其工作原理的图片：

控制台显示：

感谢任何帮助。非常感谢你！

Answer 1

＆＃13;

function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
     findTotal();
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
  
   var tot=0;

   for(var i=0;i<arr.length;i++){
      var enter_value   = Number(arr[i].textContent) //id u want do parseInt(enter_value)
      if(enter_value)
                tot += Number(arr[i].textContent);
      }
   document.getElementById('total').value = parseInt(tot);
 }

＆＃13;

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br></p>
  </fieldset></h3>
  </div><!-- COL5 END -->

＆＃13;

Answer 2

这是错误的代码：

 var arr = document.querySelectorAll("#datatable td:nth-child(2)");
 var tot=0;

 for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].value))
    tot += parseInt(arr[i].value);
 }

在这里，arr是DOM节点的集合，匹配#datatable td:nth-child(2)选择器。您正在尝试总结他们的value属性。但是，<td>元素没有value。您可能想尝试获取他们的innerText属性：

 for(var i=0;i<arr.length;i++){
  if(parseInt(arr[i].innerText))
    tot += parseInt(arr[i].innerText);
 }

请注意，您要关闭在总字段之后才打开的</p>。您的脚本可能还有其他问题，但这个问题引起了我的注意。

见working here。（我把它剥离到最低限度。）

Answer 3

这应该有用。

不是最好的代码，而是你的热门修补程序。

我建议您查看html data-属性

＆＃13;

 function addRow()
  {

    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),


      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
    
    findTotal();
  }


 function findTotal(){
   var arr = document.querySelectorAll("#datatable td:nth-child(2)");
   var tot=0;

   for(var i=0;i<arr.length;i++){
        tot += parseInt(arr[i].innerHTML);
   }
   document.getElementById('total').value = tot;
 }

＆＃13;

<div class="col-md-5" style="display: inline-block; ">
 <div class="jumbotron">
  <h2>Type in Nature of Collection...</h2>
   <form>  
     <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
     <br>
     <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
     <br>
     <button onclick="addRow(); return false;">Add Item</button>
   </form>

   <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
     <tr>
       <th>Nature of Collection</th>
       <th>Amount</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     <tr>

     </tr>     
   </tbody>
  </table>

  <h6> <label>Date:<span></span>
  </label>{{date}}</h6>

  <h3><fieldset disabled>
  <label>Total </label>
  <input type = "text" name = "total" id="total"><br>
  </fieldset></h3>
  </div><!-- COL5 END -->

＆＃13;

在表格中使用nth-child来获取值和查找总计

3 个答案: