Javascript函数仅在第一次工作

时间：2018-02-17 18:33:20

标签： javascript php jquery html

我的问题是，当我点击行添加按钮时，我无法再次获取javascript函数调用。它在第一次尝试时显示结果，但是当我点击行添加时，它不起作用。在这方面帮助我，谢谢你。

详情： 我有三个输入作为费率数量和金额。当我第一次填写费率和数量的输入时。我在javascript中通过函数调用自动获取金额。当我点击添加行按钮然后在此之后我无法再自动获得金额。似乎它没有再次调用该函数。下面是我希望有人可以解决我的小问题的代码。

<SCRIPT language="javascript" type="text/javascript">


          function addRow(tableID) {



            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;

            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[1].cells[i].innerHTML;


                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
//                    case "text":
  //                          newcell.childNodes[0].value = "";
    //                        break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;


                }

            }
$('html,body').animate({ scrollTop: 1500 }, 'slow'); 
        }

        function deleteRow(tableID) {
            try {
            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 delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>


<SCRIPT language="javascript" type="text/javascript">



function manage() {



var c=document.getElementById("quantity").value ;
var b=document.getElementById("rate").value ;
    var add= c*b ;

var d=document.getElementById("amount");

    d.value=add;
}




    </SCRIPT>
<!----------------------------------------------------------------------------------------->
<!--------------------------------------Rows Adder----------------------------------------->


<head>
<style>

   input:focus
   {
        background:none;
        border-bottom: solid #3B5998;
        outline: none;
   }

</style>
<link href="css/header_style.css" rel="stylesheet" type="text/css" />
<link href="css/hover/Hover-master/css/hover.css" rel="stylesheet" type="text/css" />


  <script src="row_adder.js">
</script>


</head>

<body onLoad="addr()">
<form style="font-family: arial, sans-serif" action="order_form_db.php" method="post" onSubmit="return check(this)">

  <div >
    <br><br>
   <div align="center">
     <table  cellspacing="2" cellspacing="2"  id="dataTablee">

       <tr>

         <th></th> 

         <th bgcolor="#CCCCCC"  style="font-size:14px" width="79" align="center">Rate</th>
         <th bgcolor="#CCCCCC"  style="font-size:14px" width="79" align="center">Quantity</th>
         <th bgcolor="#CCCCCC"  style="font-size:14px" width="79" align="center">Amount</th>




       </tr>

       <tr >

        <td ><input type="checkbox"  name="chk[]" style="background-color:#FFFFFF;" id="delete_box"/></td>       


         <td height="20px"><input id="rate" class="txtBox" style="background-color:#FFFFFF;" size="20"  type="number"  width="76px" name="rate[]" required></td>

         <td height="20px"><input id="quantity" class="txtBox" style="background-color:#FFFFFF;" size="20"  type="number"  width="76px" name="quantity[]" onKeyPress="manage()" onKeyDown="manage()" onKeyUp="manage()" ></td>

         <td height="20px"><input id="amount" class="txtBox" style="background-color:#FFFFFF;" size="20"  type="number"  width="76px" name="amount[]" ></td>

         </tr>
     </table>
     <br>

<table>

 <th  style="font-size:14px">&nbsp;&nbsp;Amount Recieved</th> 

     <td> 
        <input  id="rec" class="txtBox"  type="number" name="arecieve" />
     </td>

</table>


           <div align="center">
    <input class="hvr-glow" type="button" id="button1" class="login_button" value="Add Row" onClick="addRow('dataTablee')"  /> &nbsp;&nbsp;
    <input class="hvr-glow" type="button" id="button2" class="login_button" value="Delete Row" onClick="deleteRow('dataTablee')" />  <br><br>  
    <input class="hvr-glow" type="submit" id="button3" value="Save" name="Save" align="middle">
  </div>


 </form>

1 个答案:

答案 0 :(得分：0)

使用jQuery（因为你的代码有jQuery）和事件委托：

$(document).on('input', '[name="quantity[]"]', manage);

此外，当您添加新行时，正在创建重复ID。因此，删除ID并使用名称。

function addRow(tableID) {
  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;

  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[1].cells[i].innerHTML;

    switch (newcell.childNodes[0].type) {
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }

  $('html,body').animate({
    scrollTop: 1500
  }, 'slow');
}

function deleteRow(tableID) {
  try {
    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 delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }

    }
  } catch (e) {
    alert(e);
  }
}

function manage() {
  var c = $(this).closest('tr').find('[name="quantity[]"]').val();

  var b = $(this).closest('tr').find('[name="rate[]"]').val();
  var add = c * b;

  var d = $(this).closest('tr').find('[name="amount[]"]').val(add);
}

$(document).on('input', '[name="quantity[]"]', manage);
input:focus {
  background: none;
  border-bottom: solid #3B5998;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="font-family: arial, sans-serif" action="order_form_db.php" method="post" onSubmit="return check(this)">

  <div>
    <br><br>
    <div align="center">
      <table cellspacing="2" cellspacing="2" id="dataTablee">

        <tr>

          <th></th>

          <th bgcolor="#CCCCCC" style="font-size:14px" width="79" align="center">Rate</th>
          <th bgcolor="#CCCCCC" style="font-size:14px" width="79" align="center">Quantity</th>
          <th bgcolor="#CCCCCC" style="font-size:14px" width="79" align="center">Amount</th>




        </tr>

        <tr>

          <td><input type="checkbox" name="chk[]" style="background-color:#FFFFFF;" id="delete_box" /></td>


          <td height="20px"><input class="txtBox" style="background-color:#FFFFFF;" size="20" type="number" width="76px" name="rate[]" required></td>

          <td height="20px"><input class="txtBox" style="background-color:#FFFFFF;" size="20" type="number" width="76px" name="quantity[]"></td>

          <td height="20px"><input class="txtBox" style="background-color:#FFFFFF;" size="20" type="number" width="76px" name="amount[]"></td>

        </tr>
      </table>
      <br>

      <table>

        <th style="font-size:14px">&nbsp;&nbsp;Amount Recieved</th>

        <td>
          <input id="rec" class="txtBox" type="number" name="arecieve" />
        </td>

      </table>


      <div align="center">
        <input class="hvr-glow" type="button" id="button1" class="login_button" value="Add Row" onClick="addRow('dataTablee')" /> &nbsp;&nbsp;
        <input class="hvr-glow" type="button" id="button2" class="login_button" value="Delete Row" onClick="deleteRow('dataTablee')" /> <br><br>
        <input class="hvr-glow" type="submit" id="button3" value="Save" name="Save" align="middle">
      </div>


</form>

相关问题
最新问题