javascript不适用于php中动态添加的行

Question

This is my html code. these rows are called dynamically

<tr >
    <td><?php echo $row['qty'];?></td>
    <td class="record"><?php echo $row['prod_name'];?></td>
    <td><input type="text" id="price1" value="<?php echo 
    number_format($row['price'],2);?>" /></td>
    <td><input type="text" id="disc1" onFocus="startCalc();" 
    onBlur="stopCalc();" name="Discount"></td>
    <td><span id="tot1"><?php echo number_format($total,2);?></span></td>
    <td><a href="#updateordinance<?php echo $row['temp_trans_id'];?>" data-
   target="#updateordinance<?php echo $row['temp_trans_id'];?>" data-
   toggle="modal" style="color:#fff;" class="small-box-footer"><i 
   class="glyphicon glyphicon-edit text-blue"></i></a>

   <a href="#delete<?php echo $row['temp_trans_id'];?>" data-
   target="#delete<?php echo $row['temp_trans_id'];?>" data-toggle="modal" 
   style="color:#fff;" class="small-box-footer"><i class="glyphicon 
   glyphicon-trash text-red"></i></a>

  </td>
  </tr>

and this is my javascript code to caliculate discount for the products

function startCalc(){
    price = document.getElementById("price1").value;
    disc = document.getElementById("disc1").value;
    tot = parseInt(price) * parseInt(disc)/100;
    sub_tot = parseInt(price)-parseInt(tot);
    document.getElementById("tot1").innerHTML=sub_tot;

}

this function is working fine with first row . but second row onwards there is no action.i changed the id as class in my html code.but no luck.please check the code and give me a possible solution.

Thanks in advance.

Answer 1

If you change the HTML by removing the ID attributes ( which you don't need ) and assign input elements with a name attribute ( which they should have ) you can then alter the javascript function like this ( though not tested yet )

<tr>
    <!-- other html removed -->


    <td class="record"><?php echo $row['prod_name'];?></td>
    <td>
        <input type="text" name='price' value="<?php echo number_format($row['price'],2);?>" />
    </td>
    <td>
        <input type="text" name='disc' onFocus="startCalc(event);" onBlur="stopCalc(event);" name="Discount">
    </td>
    <td>
        <span data-name="tot">
        <?php echo number_format($total,2);?>
        </span>
    </td>


    <!-- other html removed -->

</tr>



function startCalc(event){
    var el=event.target;
    var parent=el.parentNode.parentNode;
    var price=parent.querySelectorAll('input[name="price"]')[0];
    var disc=parent.querySelectorAll('input[name="disc"]')[0];
    var out=parent.querySelectorAll('span[data-name="tot"]')[0];
    var tot=parseFloat( price.value ) * parseInt( disc.value );
    var subtot=parseFloat( price.value )-parseInt( tot );
    out.innerHTML=subtot;
}

The DOM Tree - parentNode &/or childNode

To help you understand the concept of using node.parentNode.parentNode I hope the following might be of use.

In the above diagram you can see how the DOM elements relate to one another - for instance the branch on the left depicts an image within a table-cell ( td ), that table-cell is a child of the table-row ( tr ) which is itself a child of the table. So - going up the tree you are looking at the parentNode for the previous element and likewise going down the tree you are looking at the childNodes . Understanding this enables you to traverse the DOM in the vertical direction though you can traverse sideways ( at certain points ) by using a sibling selector.

In the function I posted yesterday the function does not utilise the ID of any input elements because of the need to have unique IDs so instead needs another mechanism to find the appropriate element in the DOM - in this case the el.parentNode.parentNode says "go up two levels in the DOM from this button" which equates to the table-row. From the tr node it then queries all nodes below to find the requested input elements & other elements using querySelectorAll

To get the "Grand-Total" I would think you should use a global variable - declared when the page loads which is initially set to zero.

<script>
    var grandtotal=0;

    function startCalc(event){
        var el=event.target;
        var parent=el.parentNode.parentNode;
        var price=parent.querySelectorAll('input[name="price"]')[0];
        var disc=parent.querySelectorAll('input[name="disc"]')[0];
        var out=parent.querySelectorAll('span[data-name="tot"]')[0];
        var tot=parseFloat( price.value ) * parseInt( disc.value );
        var subtot=parseFloat( price.value )-parseInt( tot );

        grandtotal+=subtot;

        out.innerHTML=subtot;
    }

</script>

Answer 2

It will be simple with jquery if you are already using it,

change id to class and you can write like this

function startCalc(){
rowObj = $(this).closest('tr');
price = rowObj.find('.price1').val();
disc = rowObj.find('.disc1').val();
tot = parseInt(price) * parseInt(disc)/100;
sub_tot = parseInt(price)-parseInt(tot);
rowObj.find('.tot1').html(sub_tot);
}