Question

大家好:)我在开发我的销售系统方面很困难。在我的系统中我有ItemName，ITem价格，数量和总数。问题是每次我想为新项目条目添加新行时，价格将不会出现在项目价格文本框中，并且“总计”的计算也不起作用。有人可以帮助我解决我的问题。这是我的代码问候， SUGI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="script.js"></script> 
<title>Untitled Document</title>enter code here
</head>

<body onload="setup()" >
<script  type="text/javascript">

function setup(){
            var itemname = document.getElementById("Item_name");
            var tot = document.getElementById("price"); 

            itemname.onchange = function() {
            var x = document.getElementById("Item_name").selectedIndex;
            var y = document.getElementById("Item_name").options;
            tot.value =  y[x].value;    

                                            }
                 }
function TotalAll(){
    var a=document.getElementById("price");
    var b=document.getElementById("qty");
    var c=document.getElementById("total");
    c.value=a.value*b.value;
}

                 </script>
<table width="871" height="293" border="0">
  <tr>
    <td><form id="form1" name="form1" method="post" action="">
      <p><strong>SALES </strong></p>
      <table>
             <tr>
          <td>Item Name</td>
          <td>Item Price</td>
          <td>Qty</td>
          <td>Total</td>
         </tr>
</table>
         <table id="dataTable" class="form" border="1">

        <tr>
          <td><select   id="Item_name">
<option value="100">USB Flash Drive</option>
<option value="200">CD ROM</option>
<option value="300">2 GB RAM</option>
<option value="400">1 Tera RAM</option>
<option value="500">Mouse </option>

            </select></td>

          <td><label for="qty"></label>
            <input name="price[]" type="text" id="price" size="2" /></td>
          <td><input name="qty[]" type="text" id="qty"  onblur="TotalAll()"/></td>
          <td><input name="total[]" type="text" id="total"/></td>
        </tr>
    </table>
      <table width="200" border="0">
        <tr>
          <td><input type="button" value="Add Row" onClick="addRow('dataTable')" /> </td>

        </tr>
      </table>

       </tr>
      </table>
      <p>&nbsp;</p>
    </form>

</body>
</html>

这是script.js的代码

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 20){                          // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Passenger per ticket is 20.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Cannot Remove all the Passenger.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

Answer 1

问题在于动态生成的元素。当您生成新的选择框，文本框时，所有元素都具有相同的 ID 。就像您动态生成价格字段一样，所有字段都有id="price"。

但是根据DOM中的规则，每个元素都必须具有唯一的id。这就是你的 onchange（）事件不能处理动态生成的行的原因。做一些事情来生成唯一的ID然后这将工作。

使用javascript和PHP的多个销售系统输入

1 个答案: