2017-08-16 108 views
0

enter image description here 输出显示在图像要通过JavaScript通过id和name

你好我不是在JavaScript太多的专业知识,在我的代码我有添加项&删除项按钮,这是工作fine.First排工程对于总计算功能来说很好,但其余的行不能正常工作,因为我无法为创建的行分配不同的名称和ID。我如何重用JavaScript。还请让我知道如何使用POST方法或此代码接收提交数据,以及如何查找我在表格底部插入的所有行的总数。 由于提前

<!DOCTYPE html> 
<html> 
<head> 
     <link rel="stylesheet" type="text/css" href="css/default.css"/> 
     <script type="text/javascript" src="add_rows.js"></script> 
     <script> 
      function func() 
      { 
       var w = document.getElementById("qty").value; 
       var x = document.getElementById("price").value; 
       var z = document.getElementById("total"); 
       z.value = Number(w)*Number(x); 
      } 
     </script> 
</head> 
<body> 
     <fieldset class="row2"> 
       <legend>Catering Order Details</legend> 
       <p> 
        <input type="button" value="Add Items" onClick="addRow('dataTable')" /> 
        <input type="button" value="Remove Items" onClick="deleteRow('dataTable')" /> 
       </p> 

      <table id="dataTable" class="form" border="1"> 
        <tbody> 
        <tr> 
         <p> 
         <td><input type="checkbox" required="required" name="chk[]" /></td> 
         <td> 
          <label>Item</label> 
          <select size="1" name="Item[]" required="required" > 
          <?php 
           echo "<option value=''>---Choose Item---</option>"; 
           $q=mysqli_query($dbConnect1,"SELECT DISTINCT ITEM as Item, ITEM_ID FROM `manage_item`"); 
           while($r=mysqli_fetch_assoc($q)) 
           { 
           $i=$r['ITEM_ID']; 
           $n=$r['Item']; 
           echo "<option value='$i'> $n</option>"; 
           } 
          ?> 
          </select> 
         </td> 
         <td> 
          <label>Quantity</label> 
          <input type="text" required="required" name="Qty[]" id="qty" value=""> 
         </td> 
         <td> 
          <label>Price/Quantity</label> 
          <input type="text" required="required" name="Price[]" id="price" value="" onChange="func()"> 
         </td> 
         <td> 
          <label>Total</label> 
          <input type="text" required="required" name="Total[]" id="total" value=""> 
         </td> 
          </p> 
        </tr> 
        </tbody> 
       </table> 
       <div class="clear"></div> 
      </fieldset> 
</div> 
</body> 
</html> 

这里是我的脚本

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 100){      
     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 items is 100."); 

    } 
} 

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 Items."); 
       break; 
      } 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 
    } 
} 
+0

给每一行基于计数一个唯一的ID,并绑定该事件。 –

+0

function func(i) var w = document.getElementById(“qty _”+ i).value; var x = document.getElementById(“price _”+ i).value; var z = document.getElementById(“total _”+ i); z.value = Number(w)* Number(x); } –

+0

嗨,每一行都通过点击添加项目按钮动态添加。当这个事件被触发时,如何从javascipt传递id和name,以便它必须填充在添加的新行中。 –

回答

1

而是使用ID,您就可以改变他们的类名称,如:

<input type="text" required="required" name="Qty[]" class="qty" value="" oninput="func(this)"> 

由于您使用内联事件,你可以:

  • 使用input事件因为DOM输入事件被同步烧制时<输入>,的值<选择>,或< textarea的>元件被改变。
  • 作为参数传递给内联函数:这将是当前元素

因此,改变你的FUNC到:

function func(ele) { 
    var parentRow = ele.parentNode.parentNode; 
    var w = parentRow.querySelector('input.qty').value; 
    var x = parentRow.querySelector('input.price').value; 
    var z = parentRow.querySelector('input.total'); 
    z.value = Number(w)*Number(x); 
} 

这个参数现在是ele,当前元素。您现在可以获取父行并使用类和querySelector可以找到所有元素。

的片段:

function updateGrandTotal() { 
 
    var gt = document.querySelector('input.grantotal'); 
 
    gt.value = 0; 
 
    document.querySelectorAll('input.total').forEach(function(ele, idx) { 
 
     gt.value = +gt.value + +ele.value; 
 
    }); 
 
} 
 
function func(ele) { 
 
    var parentRow = ele.parentNode.parentNode; 
 
    var w = parentRow.querySelector('input.qty').value; 
 
    var x = parentRow.querySelector('input.price').value; 
 
    var z = parentRow.querySelector('input.total'); 
 
    z.value = Number(w)*Number(x); 
 
    updateGrandTotal(); 
 
} 
 
function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length -1; 
 
    if(rowCount < 100){ 
 
     var row = table.insertRow(rowCount + 1); 
 
     var colCount = table.rows[1].cells.length; 
 
     for(var i=0; i<colCount; i++) { 
 
      var newcell = row.insertCell(i); 
 
      newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
 
     } 
 
    }else{ 
 
     alert("Maximum items is 100."); 
 

 
    } 
 
} 
 

 
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 Items."); 
 
       break; 
 
      } 
 
      table.deleteRow(i); 
 
      rowCount--; 
 
      i--; 
 
     } 
 
    } 
 
    updateGrandTotal(); 
 
}
<fieldset class="row2"> 
 
    <legend>Catering Order Details</legend> 
 
    <p> 
 
     <input type="button" value="Add Items" onClick="addRow('dataTable')" /> 
 
     <input type="button" value="Remove Items" onClick="deleteRow('dataTable')" /> 
 
    </p> 
 

 
    <table id="dataTable" class="form" border="1"> 
 
     <thead> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td> 
 
       <label>Grand Total</label> 
 
       <input type="text" required="required" name="Total[]" class="grantotal" value=""></td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <p> 
 
      <td><input type="checkbox" required="required" name="chk[]" /></td> 
 
      <td> 
 
       <label>Item</label> 
 
       <select size="1" name="Item[]" required="required" > 
 
        <option value=''>---Choose Item---</option> 
 
        <option value="1">1</option> 
 
        <option value="2">2</option> 
 
        <option value="3">3</option> 
 
       </select> 
 
      </td> 
 
      <td> 
 
       <label>Quantity</label> 
 
       <input type="text" required="required" name="Qty[]" class="qty" value="" oninput="func(this)"> 
 
      </td> 
 
      <td> 
 
       <label>Price/Quantity</label> 
 
       <input type="text" required="required" name="Price[]" class="price" value="" oninput="func(this)"> 
 
      </td> 
 
      <td> 
 
       <label>Total</label> 
 
       <input type="text" required="required" name="Total[]" class="total" value=""> 
 
      </td> 
 
      </p> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <div class="clear"></div> 
 
</fieldset>

+0

嗨gaetanoM感谢它的工作很好..有没有什么办法获得所有行的总数量和底部显示。同样在提交这些数据时,我如何知道添加了多少行来推送数据库中的数据。 –

+0

@JagannathB为了获得总金额,我添加了一个函数** updateGrandTotal **。对于评论的第二部分,您可能会将表格封装为表单或ajax所有输入,然后您需要实现服务器端代码。谢谢 – gaetanoM