Question

这是我的完整代码

   <!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>
 <style>
    body  {
   background-image:url("rice.png");
  }
  </style>
   <script type="text/javascript" src="js/script.js"></script> 
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />



  <link rel='stylesheet' type='text/css' href='css/style.css' />
  <link rel='stylesheet' type='text/css' href='css/print.css' media="print" 
/>
  <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
   <script type='text/javascript' src='js/example.js'></script>
   </head>

    <body>
     <form name="form1" method="post" class="register" action="<?php echo 
     $_SERVER['PHP_SELF'];?>" >

     <div id="page-wrap">

      <textarea id="header">PURCHASE</textarea>

       <div id="identity">

         <textarea id="address" disabled>AR Traders  Address:
        </textarea >

        <div id="logo">

          <div id="logoctr">
            <a href="javascript:;" id="change-logo" title="Change    
 ">Change Logo</a>
            <a href="javascript:;" id="save-logo" title="Save 
        changes">Save</a>
            |
            <a href="javascript:;" id="delete-logo" title="Delete 
       logo">Delete Logo</a>
            <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
          </div>

          <div id="logohelp">
            <input id="imageloc" type="text" size="50" value="" /><br />
            (max width: 540px, max height: 100px)
          </div>
          <img id="image" src="images/logo.png" alt="logo" />
        </div>

    </div>

    <div style="clear:both"></div>

    <div id="customer">
     <br>
        <textarea id="customer-title">Widget Corp.
        c/o Steve Widget</textarea>

        <table id="meta">
            <tr>
                <td class="meta-head">Invoice #</td>
                <td><textarea name="invoice"></textarea></td>
            </tr>
            <tr>

                <td class="meta-head">Date</td>
                <td><input type="date" name="date" /><br></td>
            </tr>


        </table>

       < /div>


     <fieldset class="row2">
            <legend>Product Details</legend>
            <p> 
                <input type="button" value="Add Product" 
        onClick="addRow('dataTable')" /> 
                <input type="button" value="Remove Product" 
      onClick="deleteRow('dataTable')"  /> 

            </p><br>
           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr class="j">
                  <p>
                    <td><input type="checkbox" required="required" 
      name="chk[]" checked="checked" /></td>
                    <td>
                        <label>Product Details</label>
                        <input type="text" required="required" 
    name="product[]">
                     </td>
                     <td>
                        <label for="brand">Brand</label>
                        <input type="text" class="small"  name="brand[]">
                     </td>
                     <td>
                        <label for="s_brand">Sub Brand</label>
                        <input type="text" required="required" class="small"  
 name="s_brand[]">
                     </td>
                     <td>
                        <label for="qty">Quantity</label>
                        <input type="text" required="required" class="small" 
  id="qty"  name="qty[]" onblur="<?php echo $_SERVER['PHP_SELF'];?>">
                     </td>
                     <td>
                        <label for="prate">Purchase Rate</label>
                        <input type="text" required="required" class="small" 
 id="prate" name="prate[]">
                     </td>
                     <td>
                        <label for="tax">Tax</label>
                        <select id="tax" name="tax" required="required">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                     </td>
                     <td>
                        <label for="srate">Selling Price</label>
                        <input type="text"  class="small"  name="srate[]">
                     </td>
                     <td>
                        <label for="amt">Total Purchase Amount</label>
                        <input type="text" required="required" class="small" 
  id="amt" name="amt[]">
                     </td>
                        </p>
                </tr>
                </tbody>
            </table>
            <script>

     document.getElementById("tax").onblur = function(){
    var tin1 = parseFloat(document.getElementById("qty").value) * 
   parseFloat(document.getElementById("prate").value)
  var tin = parseFloat(document.getElementById("tax").value) / 100
   document.getElementById("amt").value = tin  +  tin1
   }
    </script>
            <div class="clear"></div>
        </fieldset>
      <input class="submit" name="add" type="submit" value="Confirm &raquo;" 
  />

        <div class="clear"></div>
    <div id="terms">
      <h5>Terms</h5>
      <textarea disabled>Designed by Kshathriya Technologix.</textarea>
    </div>

  </div>
  </form>
 </body>

</html>

这是我的脚本和表单。单击“添加”按钮时，表单将被添加。

该脚本仅适用于第一个表单，而我添加其他表单时，该脚本不适用于它们。

这是我的完整设计代码，它仅适用于第一个表单，而不适用于我稍后添加的其他表单。

我在此填写了完整的表单代码。

example.js

  function addRow(tableID)
  {
   var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
   if(rowCount < 20){                           
      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 Product submitted 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) {                         
            alert("Cannot Remove all the Passenger.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
          i--;
      }
   }
 }

Answer 1

您不应对多个元素使用相同的id。元素id必须是唯一的。相反，请使用class。如果您仍然需要id，请提供唯一的名称。

同样适用于select使用onchange事件而不是onblur。在下面的代码中，我使用了onchange事件。

由于您使用的是jQuery，我已经使用jQuery更新了代码，

$('#dataTable').on('change', 'select.tax', function(){

    var parentElem = $(this).closest("tr");
    var tin = parseFloat(parentElem.find(".qty").val()) * 
parseFloat(parentElem.find(".prate").val());

    parentElem.find(".amt").val(tin * parseFloat($(this).val()));
});

<强>演示：

＆＃13;

function addRow(tableID)
  {
   var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
   if(rowCount < 20){                           
      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 Product submitted 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) {                         
            alert("Cannot Remove all the Passenger.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
          i--;
      }
   }
 }



$('#dataTable').on('change', 'select.tax', function(){
  
  var parentElem = $(this).closest("tr");
    var tin = parseFloat(parentElem.find(".qty").val()) * 
parseFloat(parentElem.find(".prate").val());
    
    parentElem.find(".amt").val(tin * parseFloat($(this).val()));
    
    alert(tin);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" class="register" action="" >

     <div id="page-wrap">

      <textarea id="header">PURCHASE</textarea>

       <div id="identity">

         <textarea id="address" disabled>AR Traders  Address:
        </textarea >


    </div>

    <div style="clear:both"></div>

  


     <fieldset class="row2">
            <legend>Product Details</legend>
            <p> 
                <input type="button" value="Add Product" 
        onClick="addRow('dataTable')" /> 
                <input type="button" value="Remove Product" 
      onClick="deleteRow('dataTable')"  /> 

            </p><br>
           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr class="j">
                  <p>
                    <td><input type="checkbox" required="required" 
      name="chk[]" checked="checked" /></td>
                    <td>
                        <label>Product Details</label>
                        <input type="text" required="required" 
    name="product[]">
                     </td>
                     <td>
                        <label for="brand">Brand</label>
                        <input type="text" class="small"  name="brand[]">
                     </td>
                     <td>
                        <label for="s_brand">Sub Brand</label>
                        <input type="text" required="required" class="small"  
 name="s_brand[]">
                     </td>
                     <td>
                        <label for="qty">Quantity</label>
                        <input type="text" required="required" class="small qty" 
  id="qty"  name="qty[]" onblur="<?php echo $_SERVER['PHP_SELF'];?>">
                     </td>
                     <td>
                        <label for="prate">Purchase Rate</label>
                        <input type="text" required="required" class="small prate" 
 id="prate" name="prate[]">
                     </td>
                     <td>
                        <label for="tax">Tax</label>
                        <select id="tax" class="tax" name="tax" required="required">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                     </td>
                     <td>
                        <label for="srate">Selling Price</label>
                        <input type="text"  class="small"  name="srate[]">
                     </td>
                     <td>
                        <label for="amt">Total Purchase Amount</label>
                        <input type="text" required="required" class="small amt" 
  id="amt" name="amt[]">
                     </td>
                        </p>
                </tr>
                </tbody>
            </table>
            
            <div class="clear"></div>
        </fieldset>
      <input class="submit" name="add" type="submit" value="Confirm &raquo;" 
  />


  </div>
  </form>

＆＃13;

Answer 2

工作示例：

function addRow(tableID)
{
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount < 20){                           
    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;
      count();
    }
  }else{
    alert("Maximum Product submitted 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) {                         
        alert("Cannot Remove all the Passenger.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}

function count(){
  $(".tax").each(function(index, e){
    $(this).on('change', function(){
      var tin = parseFloat($('.qty:eq('+ index + ')').val()) * parseFloat($('.prate:eq('+ index + ')').val());
      let total = tin * parseFloat($(this).val());
      $('.amt:eq('+ index + ')').val(total);
    })
  })   
}
count();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" class="register" action="<?php echo $_SERVER['PHP_SELF'];?>">

  <div id="page-wrap">

    <textarea id="header">PURCHASE</textarea>

    <div id="identity">

      <textarea id="address" disabled>
        AR Traders  Address:
      </textarea >

      <div id="logo">

        <div id="logoctr">
          <a href="javascript:;" id="change-logo" title="Change">Change Logo</a>
          <a href="javascript:;" id="save-logo" title="Savechanges">Save</a>
          |
          <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
          <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
        </div>

        <div id="logohelp">
          <input id="imageloc" type="text" size="50" value="" /><br>
          (max width: 540px, max height: 100px)
        </div>
        <img id="image" src="images/logo.png" alt="logo" />
      </div>

    </div>

    <div style="clear:both"></div>

    <div id="customer">
      <br>
      <textarea id="customer-title">
        Widget Corp.c/o Steve Widget
      </textarea>

      <table id="meta">
        <tr>
          <td class="meta-head">Invoice #</td>
          <td><textarea name="invoice"></textarea></td>
        </tr>
        <tr>
          <td class="meta-head">Date</td>
          <td><input type="date" name="date" /><br></td>
        </tr>
      </table>

    </div>

    <fieldset class="row2">
      <legend>Product Details</legend>
      <p>
        <input type="button" value="Add Product" onClick="addRow('dataTable')" />
        <input type="button" value="Remove Product" onClick="deleteRow('dataTable')" />

      </p><br>
      <table id="dataTable" class="form" border="1">
        <tbody>
          <tr>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
            <td>
              <label>Product Details</label>
              <input type="text" required="required" name="product[]">
            </td>
            <td>
              <label for="brand">Brand</label>
              <input type="text" class="small" name="brand[]">
            </td>
            <td>
              <label for="s_brand">Sub Brand</label>
              <input type="text" required="required" class="small" name="s_brand[]">
            </td>
            <td>
              <label for="qty">Quantity</label>
              <input type="text" required="required" class="small qty" id="qty" name="qty[]" onblur="<?php echo $_SERVER['PHP_SELF'];?>">
            </td>
            <td>
              <label for="prate">Purchase Rate</label>
              <input type="text" required="required" class="small prate" id="prate" name="prate[]">
            </td>
            <td>
              <label for="tax">Tax</label>
              <select id="tax" class="tax" name="tax" required="required">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
            </td>
            <td>
              <label for="srate">Selling Price</label>
              <input type="text" class="small" name="srate[]">
            </td>
            <td>
              <label for="amt">Total Purchase Amount</label>
              <input type="text" required="required" class="small amt" id="amt" name="amt[]">
            </td>
          </tr>
        </tbody>
      </table>
      <div class="clear"></div>
    </fieldset>
    <input class="submit" name="add" type="submit" value="Confirm &raquo;" />

    <div class="clear"></div>
    <div id="terms">
      <h5>Terms</h5>
      <textarea disabled>Designed by Kshathriya Technologix.</textarea>
    </div>

  </div>
</form>

onblur函数的值数组

2 个答案: