javascript - 如何从拆分数组函数中乘以数据

Question

我想将数据添加到表中，将文本拆分为数组。当我点击添加按钮时，数据出现在表格中，并自动将价格和金额乘以总价。谁能帮帮我？

这是html

    <div class="container">

        <div class="form" style="margin-top: 50px;">

            <div class="form">
                <div class="form-group">
                    <label for="inputEmail3">Input</label>
                    <div class="">
                        <input type="text" class="form-control" id="transaction" placeholder="Input Transaction">
                    </div>
                </div>
                <div class="form-group">
                    <div>
                        <button type="submit" class="btn btn-default" onclick="addTransaction()">Add</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <table id="table_trans" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Amount</th>
                        <th>Total Price</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <input type="button" value="Total Price" class="btn btn-success" id="sumTransaction()"/>
                        </td>
                        <td id="area_total"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- /.container -->

这是分割函数

 function addRow(tags){
 var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
 var newRow = theTable.insertRow(-1);
 var newCell, theText, i;
 for(i=0;i<tags.length;i++){
 newCell = newRow.insertCell(i);

 theText = document.createTextNode(tags[i]);
 newCell.appendChild(theText);
 }
 }

function addTransaction(){
var inputTags = document.getElementById('transaction').value;
addRow(inputTags.split(','));
}

Answer 1

如本 codepen ，我将字符串传递给 addRow 和 split() 那里，取 Price 并将其乘以 Amount 获取 Total，然后将 Total 的值附加到 tags 数组:

function addRow(tags) {
  tags = tags.split(',');
  var total = tags[1] * tags[2];
  tags.push(total);
  var theTable = document.getElementById('table_trans').getElementsByTagName('tbody')[0];
  var newRow = theTable.insertRow(-1);
  var newCell, theText, i;
  for (i = 0; i < tags.length; i++) {
    newCell = newRow.insertCell(i);

    theText = document.createTextNode(tags[i]);
    newCell.appendChild(theText);
  }
}

function addTransaction() {
  var inputTags = document.getElementById('transaction').value;
  addRow(inputTags);
}

<div class="container">

  <div class="form" style="margin-top: 50px;">

    <div class="form">
      <div class="form-group">
        <label for="inputEmail3">Input</label>
        <div class="">
          <input type="text" class="form-control" id="transaction" placeholder="Input Transaction">
        </div>
      </div>
      <div class="form-group">
        <div>
          <button type="submit" class="btn btn-default" onclick="addTransaction()">Add</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <table id="table_trans" class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Amount</th>
          <th>Total Price</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <input type="button" value="Total Price" class="btn btn-success" id="sumTransaction()" />
          </td>
          <td id="area_total"></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
<!-- /.container -->