javascript - 对 HTML 表中的所有行运行 javascript

Question

我试图在从 MySQL 数据库获取数据后对 HTML 表中的所有行运行 jscript。使用 codeigniter 在 MVC 中执行此操作。我只是获取第一行，而不是通过 javascript 获取所有行的计算值。请帮帮我!

这是代码

<table id="myTable" border="1">
<tbody>
    <tr>
        <td>date</td>
        <td>client ID</td>
        <td>client Name</td>
        <td>Bill Amount</td>
        <td>VAT(%)</td>
        <td>Service Charge(Client)</td>
        <td>Service Charge(IDK)</td>
        <td>Subtotal</td>
        <td>Service Charge(FoodHive)</td>
        <td>Delivery Charge(FoodHive)</td>
        <td>Service Tax(FoodHive)</td>
        <td>TDS</td>
        <td>Net Service Charge</td>
        <td>Net Amount</td>
    </tr>

<?php
foreach ($h->result() as $row) {?>

    <tr id="row1">
    <td><?php echo $row->order_raised_at;?></td>
    <td><?php echo $row->client_id;?></td>
    <td><?php echo $row->client_name;?></td>
    <td name="billAmount" id="billAmount"><?php echo $row->bill_amount;?></td>
    <td name="VAT" id="VAT"><?php echo $row->VAT;?></td>
    <td name="serviceChargeClient" id="serviceChargeClient"><?php echo $row->service_charge_client; ?></td>
    <td name="serviceChargeClientIDK" id="serviceChargeClientIDK"><?php echo $row->service_charge_client_idk; ?></td>
    <td name="subtotal" id="subtotal">&nbsp;</td>
    <td name="serviceChargeFH" id="serviceChargeFH"><?php echo $row->service_charge_fh;?></td>
    <td name="deliveryChargeFH" id="deliveryChargeFH">&nbsp;</td>
    <td name="serviceTaxFH" id="serviceTaxFH"><?php echo $row->service_tax_fh;?></td>
    <td name="TDS" id="TDS"><?php echo $row->TDS;?></td>
    <td name = "netServiceCharge" id="netServiceCharge">&nbsp;</td>
    <td name="netAmount" id="netAmount">&nbsp;</td>
</tr>

<script>
var bill  = $('#billAmount').text(); //220
            var vatpercent = $('#VAT').text(); //12.5%
            var servclient = $('#serviceChargeClient').text(); //10%
            var servidk = $('#serviceChargeClientIDK').text(); //5.6
            var servfhpercent = $('#serviceChargeFH').text(); //15%
            var servtaxfh = $('#serviceTaxFH').text(); //14
            var tds = $('#TDS').text(); //0

            var vat = (vatpercent/100)*bill; 
            var subtotal = bill-vat-servclient-servidk; 
            var servfh = (servfhpercent/100)*subtotal; //26.535
            var netserv = parseFloat(servfh)+parseFloat(servtaxfh);
            var netamount = bill-netserv;

            $('#subtotal').text(subtotal);
            $('#deliveryChargeFH').text(servfh);
            $('#netServiceCharge').text(netserv);
            $('#netAmount').text(netamount);
</script>
<?php } ?>

</tbody>
</table>

诸如 bill_amount、VAT、service_charge、service_charge_fh 等值已存储在各个客户的数据库中。代码使用js从表中的db获取这些值进行客户端计算，计算出:

小计，送货费，网络服务费用， Netty

Controller

<?php
class select extends CI_Controller{

  public function index(){

    $this->load->database(); //load database
    $this->load->model('select_model');
    $data['h'] = $this->select_model->select(); //load model method
    $this->load->view('select_view' , $data);

    }
 }?>

型号

<?php

class select_model extends CI_Model{

  function __construct(){

    parent:: __construct();
}

  public function select(){
     $orderDate = $_POST['order_date'];
     $yourDate = date("Y-m-d" , strtotime($orderDate));
     $clientName = $_POST['clientName'];
    $query = $this->db->query("SELECT client_orders.order_raised_at, client_orders.bill_amount, client_orders.client_id, 
                                client_orders.client_name, client_charges.VAT, client_charges.service_charge_client,client_orders.subtotal,
                                client_charges.service_charge_client_idk, client_charges.service_charge_fh, client_charges.service_tax_fh,
                                client_charges.TDS from client_orders INNER JOIN client_charges 
                                ON client_orders.client_id = client_charges.client_ID where client_orders.client_name = '$clientName' 
                                AND client_orders.order_raised_at = '$yourDate'");
    return $query;  


    }
  }



?>

Answer 1

id 必须是唯一的。即使位于 10 个位置，$('#billAmount').text() 也将始终从第一个位置获取文本:http://jsfiddle.net/48du5ouj/

我假设您在该表上有一个主键(自动增量 ID？)，因此您可以执行以下操作:

<?php foreach ($h->result() as $row) {?>

<tr id="row-<?php echo $row->id; ?>">
    <td name="billAmount" class="billAmount"><?php echo $row->bill_amount;?></td>

<script>
var bill  = $('$row-<?php echo $row->id; ?> .billAmount').text();