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

Question

这是我的HTML代码。这些行是动态调用的

<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;

}

这个功能在第一行工作正常。但是第二行以后没有action.i在我的html代码中将id更改为class.but no luck.please检查代码并给我一个可能的解决方案。

提前致谢。

Answer 1

如果您通过删除ID属性（您不需要）来更改HTML并为输入元素分配名称属性（它们应该具有），那么您可以改变这样的javascript函数（尽管未经过测试）但是）

<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;
}

DOM树 - parentNode＆amp; /或childNode

为了帮助您理解使用node.parentNode.parentNode的概念，我希望以下内容可能会有用。

在上图中，您可以看到DOM元素如何相互关联 - 例如左边的分支描绘了一个表格单元格（td）中的图像，该表格单元格是表格行的子元素（tr）本身就是桌子的孩子。所以 - 向上看树，你正在查看前一个元素的parentNode，同样沿着你正在查看childNodes的树。了解这一点使您可以在垂直方向上遍历DOM，尽管您可以使用sibling选择器横向移动（在某些点）。

在我昨天发布的函数中，该函数不使用任何输入元素的ID，因为需要具有唯一ID，因此需要另一种机制来在DOM中找到适当的元素 - 在这种情况下{{1}说＆＃34;从这个按钮上升到DOM中的两个级别＆＃34;这相当于表格行。然后，从el.parentNode.parentNode节点查询下面的所有节点，找到所请求的输入元素＆amp;使用tr

的其他元素

要获得querySelectorAll，我认为你应该使用一个全局变量 - 在页面加载时声明，最初设置为零。

"Grand-Total"

Answer 2

如果您已经使用它，那么使用jquery会很简单，

将id更改为class，你可以像这样写

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);
}