Question

我有一个html代码来添加一些订单，客户将从combobox中选择项目并在textbox中写下其金额，然后点击add按钮然后他可以选择另一个项目，然后写下它的金额，等等，我需要在每次点击按钮后添加order details并在旁边添加remove按钮，以允许用户将其从订单中删除，如果他愿意，怎么办呢？

<div>
    <label class="arrow-right"> Category Name:</label>
</div>
<div>                           
    <select class="SelectStyle" style="width:95%;margin-left:4px;border:0;" name="CategoryName" id="CategoryName" onchange="GetCatType(this.options[this.selectedIndex].innerHTML)">
        <option value="">Select Category Name</option>
            <!--populate value using php-->
            <?php
             $stmt ="SELECT distinct Category_Name FROM Categories";
             foreach ($conn->query($stmt) as $row) {
            ?>
                <option value="<?php echo $row['ID'];?>"><?php echo $row['Category_Name'];?></option>
            <?php
            }
            ?>
    </select>
</div>
<div>
    <label class="arrow-right"> Category Type:</label>
</div>
<div>
    <select class="SelectStyle" style="width:95%;margin-left:4px;border:0;" name="CategoryType" id="CategoryType" >
    <option value="">Select Category Type</option>
    </select>
</div>
<div>
    <label> &nbsp;&nbsp;Amount:</label>
    <input type="text" id="Amounttxt" style="background-color:white;color:rgb(16,29,73);font-weight:bold;padding-left:5px;width:90px;height:28px;" name="Amounttxt"> &nbsp;<label>Kg</label>
    <button id="Add" type="button" class="btn btn-success" style="margin-left: 5px;" onclick="AddAmount()">Add</button>
</div>
<div>
    <label class="arrow-right"> Order Details:</label><br>
    <ul id="OrderDetails"></ul>
</div>
<div class="col-sm-6 col-sm-offset-3">
      <div>
        <button id="AddOrder" type="button" class="btn btn-success" style="margin-bottom:5px;" onclick="AddNewOrder()">Add Order</button><br>
      </div>
</div>

Javascript代码：

 function AddAmount()
  {
  var sel = document.getElementById('CategoryName');
  var CatName = sel.options[sel.selectedIndex].text;
  var select = document.getElementById('CategoryType');
  var CatType = select.options[select.selectedIndex].text;
  var catSel = select.options[select.selectedIndex].value;
  var AmountTxt = document.getElementById('Amounttxt').value;

   if(catSel!='' && AmountTxt!='')
    {
          var OrderDetails=document.getElementById('OrderDetails');
          var existingItems = OrderDetails.childNodes;

            if(existingItems.length>0){
                for(i=0; i < existingItems.length; i++){
                        if(existingItems[i].getAttribute('cattype')==CatType){
                            alert('Item already Added');
                            return false;
                        }
                    }
                }
        var current=document.getElementById('OrderDetails').innerHTML;
        var new_item='<li class="OrderDetails" catname=' + CatName + ' cattype='+CatType +' amountTxt='+AmountTxt+'>'+ CatName + " " +CatType + " : " + AmountTxt + ' Kg <i class="glyphicon glyphicon-remove" onclick="removeit(this)"></i></li>';
        alert(new_item);
        document.getElementById('OrderDetails').innerHTML=current+new_item;
        document.getElementById('Amounttxt').value="";
   }

   else{
   alert('values are incomplete');
   }

}

Answer 1

创建一个js数组，在其中存储要在OrderDetails中显示的不同行。每当有什么变化，你都可以重绘＆＃39;该字段的内容基于数组中的值。因此，当删除某个项目时，将其从数组中删除并调用重绘您要在其中显示的标签/字段的innterHTML的功能。

但是，我必须说，这真的是一种奇怪的做法。我不知道你到底想要做什么，但也许可以四处看看其他系统/网站/工具如何处理这些用例。

Answer 2

function AddAmount()
   {
      var select = document.getElementById('CategoryType');
      var CatType = select.options[select.selectedIndex].text;
	   var catSel = select.options[select.selectedIndex].value;
      var AmountTxt = document.getElementById('Amounttxt').value;
	   if(catSel!='' && AmountTxt!=''){
	  var OrderDetails=document.getElementById('OrderDetails')
	  var existingItems = OrderDetails.childNodes;
		if(existingItems.length>0){
			for(i=0; i < existingItems.length; i++){
					if(existingItems[i].getAttribute('cattype')==CatType){
						alert('Item already Added')
	   					return false
				 	}
				}
			}
		   

    var current=document.getElementById('OrderDetails').innerHTML
    var new_item='<p cattype='+CatType +' amountTxt='+AmountTxt+'>'+CatType + " : " + AmountTxt + ' Kg <i class="glyphicon glyphicon-remove" onclick="removeit(this)"></i></p>';
    document.getElementById('OrderDetails').innerHTML=current+new_item;


		   
	document.getElementById('CategoryType').value="";
	document.getElementById('Amounttxt').value="";
	   }
	   
	   else{
	   alert('values are incomplete');
	   }
      
   }

function removeit(obj){
	
	var answer= confirm("Do you want to remove")
	if(answer){
		obj.parentNode.remove()
	}
}
function showSummary(){
var OrderDetails=document.getElementById('OrderDetails')
var existingItems = OrderDetails.childNodes;
  if(existingItems.length>0){
	  for(i=0; i < existingItems.length; i++){
		alert("Selected Item is "+existingItems[i].getAttribute('cattype') +" with quantity "+ existingItems[i].getAttribute('amountTxt')+" kg")
	}
  }
  else{
	alert("no Item Added")
  }
}

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
<div class="col-sm-5">
    <div>
        <label class="arrow-right"> Category Type:</label>
    </div>
    <div>
        <select class="SelectStyle" style="width:200px;margin-left:4px;border:0;" name="CategoryType" id="CategoryType" >
           <option value="">Select Category Type</option>
           <option value="1">One</option>
				<option value="2">Two</option>
        </select>
    </div>                  
    </div>
<div class="col-sm-4">
    <div><label> &nbsp;&nbsp;Amount:</label></div>
    <div>
        <input type="text" id="Amounttxt" style="background-color:white;color:rgb(16,29,73);font-weight:bold;padding-left:5px;width:80px;height:28px;" name="Amounttxt"> &nbsp;<label>Kg</label>
    </div>
</div>
<div class="col-sm-3">
    <div><br></div>
    <div>
       <button id="Add" type="button" class="btn btn-success" onclick="AddAmount()">Add</button>
    </div>
</div>
</div>
<div class="row">
   <div class="col-sm-12">
    <label class="arrow-right"> Order Details:</label><br>
    <label id="OrderDetails"></label>
	   <button onclick="showSummary()"> Show Summary</button>
   </div>
</div>

如何删除项目表单列表？

2 个答案: