Question

我想做我在片段中所做的事情，但是作为一个数组。这是什么意思呢？假设用户想要在代码段中添加另一行代码。代码应该同时运行并计算两行的总数。可以添加新行，这就是为什么即时通讯我试图将此作为数组执行。我正在尝试像excel那样使用根据单元格的变化添加数据的单元格，但是以更简单的方式添加并且仅指定单元格。

我该怎么做？

这是我想要将此功能添加到的代码：

index.php

<html>  
      <head>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">   
                     <div id="live_data"></div>                 
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      function fetch_data()  
      {  
           $.ajax({  
                url:"select.php",  
                method:"POST",  
                success:function(data){  
                     $('#live_data').html(data);  
                }  
           });  
      }

      fetch_data();  
      $(document).on('click', '#btn_add', function(){ 
           /* this function would also add the prices to the table*/ 
           var first_name = $('#first_name').text();  
           var last_name = $('#last_name').text();  
           if(first_name == '')  
           {  
                alert("Enter First Name");  
                return false;  
           }  
           if(last_name == '')  
           {  
                alert("Enter Last Name");  
                return false;  
           }  
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{first_name:first_name, last_name:last_name},  
                dataType:"text",  
                success:function(data)  
                {  
                     alert(data);  
                     fetch_data();  
                }  
           })  
      });
 });  
 </script>

select.php

<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $output = '';  
 $sql = "SELECT * FROM tbl_sample ORDER BY id DESC";  
 $result = mysqli_query($connect, $sql);  
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">  
                <tr>  
                     <th width="10%">Id</th>  
                     <th width="40%">First Name</th>  
                     <th width="40%">Last Name</th>  
                     <th width="10%">Delete</th>  
                </tr>';  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td>'.$row["id"].'</td>  
                     <td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>  
                     <td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>  
                     <td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>  
                </tr>  
           ';  
      }  
      $output .= '  
           <tr>  
                <td></td>  
                <td id="first_name" contenteditable></td>  
                <td id="last_name" contenteditable></td>  
                <td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>  
           </tr>  
      ';  
 }  
 else  
 {  
      $output .= '<tr>  
                          <td colspan="4">Data not Found</td>  
                     </tr>';  
 }  
 $output .= '</table>  
      </div>';  
 echo $output;  
 ?>

$(document).ready(function() {
  // functions assigned to onchange properties
  document.getElementById('price').onchange = function() {
    // access form and value properties via this (keyword)
    var form = this.form;
    var total = parseFloat(this.value) + parseFloat(form.elements['aditional_price'].value);
    form.elements['total'].value = formatDecimal(total);
  };

  document.getElementById('aditional_price').onchange = function() {
    // access form and value properties via this (keyword)
    var form = this.form;
    var total = parseFloat(this.value) + parseFloat(form.elements['price'].value);
    form.elements['total'].value = formatDecimal(total);

  };

  // format val to n number of decimal places
  function formatDecimal(val, n) {
    n = n || 2;
    var str = "" + Math.round(parseFloat(val) * Math.pow(10, n));
    while (str.length <= n) {
      str = "0" + str;
    }
    var pt = str.length - n;
    return str.slice(0, pt) + "." + str.slice(pt);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="form1" class="form1" name="form1">

  <fieldset>

    <p>
      Price
      <input name="price" id="price" size="4" value="0" />+ Aditional Price
      <input name="aditional_price" id="aditional_price" value="0" size="4" />
      <br/>
      <!-- new row added
      <br/>
      Price
      <input name="price" id="price" size="4" value="0" />+ Aditional Price
      <input name="aditional_price" id="aditional_price" value="0" size="4"/>
      <br/>
      -->
      <br/>
      <label>Total: $
        <input type="text" class="num" name="total" value="0.00" readonly="readonly" />
      </label>
    </p>

  </fieldset>

</form>

如何在任何时候添加行时运行onchange事件

0 个答案: