2017-08-16 88 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