Question

我试图通过执行警报来获取已删除行的小计值。然而，没有任何东西出现。我正在使用Jquery。

我在previous stackoverflow question上研究了答案，但我仍然无法让它发挥作用。

我将不胜感激任何建议。

HTML：

<form>
<fieldset>
<legend>
Customer's Information
</legend>
<!--asks for name-->
<label for="nameInput">Name</label>
<input type="text" id="nameInput" name="name" placeholder="John Doe" />

<br><br> 
Drink Order:    
<!--asks for coffee type-->
<select name="drinkType" id="drinkType">
<option value="#">Select Drink</option>
<option value="0">Tea  $2.25</option>
<option value="1">Coke  $2.50</option>
<option value="2">Coffee  $2.25</option>
</select>
<br><br>
<label for="subtotal">Subtotal :</label>
<input type="text" id="subtotal" disabled>
<br>
<label>&nbsp;</label>
<input type="button" id="placeOrderBtn" value="Place Order">    
<br><br>

</fieldset>
</form>
<br>
<br>
<div id = "receiptO">
<table id = "receiptOrders">  
<thead>
<tr>
<th>Item Number</th>
<th>Name</th>
<th>Type of Coffee</th>
<th>Subtotal</th>
<th>Edit/Save</th>
<th><input type="button" id="deleteRowBtn" value="Delete Row"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

JS：

// if errors JavaScript will stop running
"use strict";

// Global Variables
var amt = 0; 
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes

// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder =[]; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal
var result = []; // holds subtotal in delete function

// ready event: short way
$(function() {    
// change
$("select").change(processOrder); // select tags

// calculates total cost
$("#placeOrderBtn").click(function() {
var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
var totalList = 0; 
var subtotal = parseFloat($("#subtotal").val());
subtotal = subtotal.toFixed(2);  // converts to string, 2 numbers after decimal

// adds new item to the end of the array using push method
namesInputsHolder.push(nameInput); // adds name
drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type

subtotalHolder.push(subtotal); // adds subtotal cost

// i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) { 
totalList = "<tr><td></td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='checkbox'></td></tr>";    
}

$("#receiptOrders > tbody").append(totalList); // table: tbody: children
}

// deletes row 
$("#deleteRowBtn").click(function() {
$("#receiptOrders input:checkbox:checked").closest('tr').remove(); // deletes row

$("#receiptO").click(function() {
// get value of subtotal of deleted row
$("input:checkbox:checked", "#receiptOrders").each(function() {
result.push($(this).children().next().text());
});
alert(result);
}); 
}); // end delete click

}); // end places order click

}); // end of ready event handler

var processOrder = function() {
// declaring local variables
var amt = 0;
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page

// shows output 

//calls the function 
var subtotal = drinkType(drink);
subtotal = parseFloat(subtotal);
// val() returns string, need to parse it into number first
$("#subtotal").val(subtotal.toFixed(2)); 

};

// matches each drink type to each price
// gets amount
var drinkType = function(inDrink) {
var amt = 0;
switch(inDrink) {
case 0:
amt = drinkCosts[0]; // Tea
break;
case 1:
amt = drinkCosts[1]; // Coke  
break;
case 2:
amt = drinkCosts[2]; // Coffee
break;
}
return amt;
};

// matches each drink type to each price
// gets name for receipt purposes
var drinkTypeName = function(inDrink) {
switch(inDrink) {
case 0:
return "Tea"; 
break;
case 1:
return "Coke";   
break;
case 2:
return "Coffee";
break;
}
};

Answer 1

您可以更改与delete按钮相关的以下代码。请注意，我已将代码移出placeOrderBtn onclick。

// if errors JavaScript will stop running
"use strict";

// Global Variables

var amt = 0;
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes

// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder = []; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal
var result = []; // holds subtotal in delete function

// ready event: short way
// long way: $(document).ready(function()){
$(function () {
	// change
	$("select").change(processOrder); // select tags

	// deletes row 
	$("#deleteRowBtn").click(function () {
		$("#receiptOrders input:checkbox:checked").each(function () {
			var subTotal = $(this).closest("tr").find("td:eq(3)").text();
			alert(subTotal);
			$(this).closest('tr').remove(); // deletes row
		});
	}); // end delete click

	// calculates total cost
	$("#placeOrderBtn").click(function () {
		if ($("#drinkType").val() == "#") {
			alert("Please select a drink type");
		} else {
			var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
			var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
			var totalList = 0;
			var subtotal = parseFloat($("#subtotal").val());
			subtotal = subtotal.toFixed(2);  // converts to string, 2 numbers after decimal

			// adds new item to the end of the array using push method
			namesInputsHolder.push(nameInput); // adds name
			drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type

			subtotalHolder.push(subtotal); // adds subtotal cost

			// i retrieves each element from the array
			for (var i = 0; i < namesInputsHolder.length; i++) {
				totalList = "<tr><td></td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='checkbox'></td></tr>";
			}

			$("#receiptOrders > tbody").append(totalList); // table: tbody: children
		}
	}); // end places order click

}); // end of ready event handler

var processOrder = function () {
	// declaring local variables
	var amt = 0;
	var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page

	// shows output 

	//calls the function 
	var subtotal = drinkType(drink);
	subtotal = parseFloat(subtotal);
	// val() returns string, need to parse it into number first
	$("#subtotal").val(subtotal.toFixed(2));

};

// matches each drink type to each price
// gets amount
var drinkType = function (inDrink) {
	var amt = 0;
	switch (inDrink) {
		case 0:
			amt = drinkCosts[0]; // Tea
			break;
		case 1:
			amt = drinkCosts[1]; // Coke  
			break;
		case 2:
			amt = drinkCosts[2]; // Coffee
			break;
	}
	return amt;
};

// matches each drink type to each price
// gets name for receipt purposes
var drinkTypeName = function (inDrink) {
	switch (inDrink) {
		case 0:
			return "Tea";
			break;
		case 1:
			return "Coke";
			break;
		case 2:
			return "Coffee";
			break;
	}
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header>
	<h1>Sample</h1>
</header>

<div class="container">

	<main>

		<br>

		<form>
			<fieldset>
				<legend>
					Customer's Information
				</legend>
				<!--asks for name-->
				<label for="nameInput">Name</label>
				<input type="text" id="nameInput" name="name" placeholder="John Doe" />

				<br>
				<br> Drink Order:
				<!--asks for coffee type-->
				<select name="drinkType" id="drinkType">
					<option value="#">Select Drink</option>
					<option value="0">Tea $2.25</option>
					<option value="1">Coke $2.50</option>
					<option value="2">Coffee $2.25</option>
				</select>
				<br>
				<br>
				<label for="subtotal">Subtotal :</label>
				<input type="text" id="subtotal" disabled>
				<br>
				<label>&nbsp;</label>
				<input type="button" id="placeOrderBtn" value="Place Order">
				<br>
				<br>

			</fieldset>
		</form>
		<br>
		<h3 class="hiddenReceipt">Receipt</h3>
		<br>
		<div id="receiptO">
			<table id="receiptOrders">
				<thead>
					<tr>
						<th>Item Number</th>
						<th>Name</th>
						<th>Type of Coffee</th>
						<th>Subtotal</th>
						<th>Edit/Save</th>
						<th>
							<input type="button" id="deleteRowBtn" value="Delete Row">
						</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</main>

</div>
<!-- end .container -->

Answer 2

你可以试试这个。我想这就是你想要的。

你在从相应的td中找到文本时遇到了错误。希望这是你想要的。

https://jsfiddle.net/LL7myety/1/

// if errors JavaScript will stop running
"use strict";

// Global Variables

var amt = 0; 
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes

// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder =[]; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal
var result = []; // holds subtotal in delete function

// ready event: short way
// long way: $(document).ready(function()){
$(function() {    
    // change
    $("select").change(processOrder); // select tags


    // calculates total cost
    $("#placeOrderBtn").click(function() {
        if ($("#drinkType").val() == "#") {
            alert ("Please select a drink type");
        } else {
        var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
        var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
        var totalList = 0; 
        var subtotal = parseFloat($("#subtotal").val());
        subtotal = subtotal.toFixed(2);  // converts to string, 2 numbers after decimal


    // adds new item to the end of the array using push method
    namesInputsHolder.push(nameInput); // adds name
    drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type

    subtotalHolder.push(subtotal); // adds subtotal cost

    // i retrieves each element from the array
    for (var i = 0; i < namesInputsHolder.length; i++) { 
        totalList = "<tr><td></td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='checkbox'></td></tr>";    
    }

    $("#receiptOrders > tbody").append(totalList); // table: tbody: children
    }

    // deletes row 
    $("#deleteRowBtn").click(function() {
    result=[];
    $("input:checkbox:checked", "#receiptOrders").each(function() {
        result.push($(this).parent().parent().find("td:eq(3)").text());
        });



        $("#receiptOrders input:checkbox:checked").closest('tr').remove(); // deletes row

         alert(result);

 /*       $("#receiptO").click(function() {
        // get value of subtotal of deleted row
        $("input:checkbox:checked", "#receiptOrders").each(function() {
        result.push($(this).parent().parent().find("td:eq(3)").text());
        });
       alert(result);

        }); */
    }); // end delete click

    }); // end places order click

}); // end of ready event handler

var processOrder = function() {
    // declaring local variables
    var amt = 0;
    var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page

    // shows output 

    //calls the function 
    var subtotal = drinkType(drink);
    subtotal = parseFloat(subtotal);
    // val() returns string, need to parse it into number first
    $("#subtotal").val(subtotal.toFixed(2)); 

};

// matches each drink type to each price
// gets amount
var drinkType = function(inDrink) {
    var amt = 0;
    switch(inDrink) {
        case 0:
           amt = drinkCosts[0]; // Tea
           break;
        case 1:
           amt = drinkCosts[1]; // Coke  
           break;
        case 2:
           amt = drinkCosts[2]; // Coffee
           break;
    }
        return amt;
};

// matches each drink type to each price
// gets name for receipt purposes
var drinkTypeName = function(inDrink) {
    switch(inDrink) {
        case 0:
           return "Tea"; 
           break;
        case 1:
           return "Coke";   
           break;
        case 2:
           return "Coffee";
           break;
    }
};

获取表中小计的值

HTML：

JS：

2 个答案: