单击编辑后，它只允许我编辑该行中的一个单元格，而不能编辑其余单元格

Question

我遇到的问题

下订单后，我想单击编辑并能够编辑编辑按钮所在的行中的每个单元格。但是，它只允许我编辑小计单元格，而不能编辑其余单元格。我在Jquery代码中发出警报，看看我是否选择了正确的单元格，但没有任何显示。

https://jsfiddle.net/f1achp5s/5/

我将不胜感激任何建议

.HTML：

<div>
<main>
<br>
<form>
    <fieldset>
    <!--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.75</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>   
<table id = "receiptOrders">  
    <thead>
       <tr>
          <th>Item Number</th>
          <th>Name</th>
          <th>Subtotal</th>
          <th>Edit/Save</th>
       </tr>
    </thead>
    <tbody></tbody>
</table>
</main>
</div>
</body>
</html>

.JS：

// if errors JavaScript will stop running
"use strict";
// Global Variables
var amt = 0; 
var itemNumber; // for receipt purposes
// arrays
var drinkCosts = [2.25, 2.50, 2.75]; // costs of each drink type
var namesInputsHolder =[]; // holds each customer's name
var subtotalHolder = []; // holds each customer's subtotal
// ready event: short way
$(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 nams
         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 class='editableText'>" +   namesInputsHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td><input type='button' value='Edit' class='editBtn'><input type='button' value='Save' class='saveBtn'></td></tr>";    
           }
         $("#receiptOrders > tbody").append(totalList); // table: tbody: children
         }
    // edits information
    $(".editBtn").click(function() { 
        $(this).hide(); // hides edit button
        $(this).next(".saveBtn").show(); // displays save button
        $(this).closest("tr").find("td:not(:last-child)").each(function() {
          $("tr").not(this).prop("contenteditable", false); 
          $(this).prop("contenteditable", true);
          $(this).css({"backgroundColor": "#c4c7c6"});
        });
    });
    // saves information
    $(".saveBtn").click(function() {
        $(this).hide(); // hides save button
        $(this).prev(".editBtn").show(); // displays edit button
        $(this).prop("contenteditable", false);
        $("td").not(this).prop("contenteditable", false); 
    });
    }); // 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;
};

Answer 1

最初我的代码是：

$(this).closest("tr").find("td:not(:last-child)").each(function() {
    $("td").not(this).prop("contenteditable", false); 
    $(this).prop("contenteditable", true);
    $(this).css({"backgroundColor": "#c4c7c6"});
});

我把它改成：

最初我的代码是：

$(this).closest("tr").find("td:not(:last-child)").each(function() {
    $("td").not(this).prop("contenteditable", false); 
    $(this).prop("contenteditable", true);
    $(this).css({"backgroundColor": "#c4c7c6"});
});

我更新了我的代码和jsFiddle