Question

Technologies:

javascript

html

jquery

Tolerim

21 hours ago

How can jQuery be used to retrieve the value of a particular row in a list of added items?

I am facing an issue in which I want to update the value of a span element to reflect the value of an input type element as soon as the user types anything in the input field. However, my current code is updating the total value for all selected items instead of only updating the total for the specific row in which the keyup event was triggered. Additionally, I want to remove a specific row when the user clicks on the corresponding remove item button. Can someone help me with this? Here's the code I currently have:


$("#allcb").change(function () {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});

$(document).on("keyup", ".quantity_input", function() {
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  valueinput = $(".quantityinput").val();
  pricevalue = $(".pricevalue").html();
  totalvalue = parseInt(valueinput) * parseInt(price_value);
  $(".totalvaluerow").text(total_value);
});

$(document).on("click", ".remove_data", function(){
    alert("I've been clicked! remove the row item");
});

$(document).ready(function () {
  $("#add_data").click(function () {
    var grid = document.getElementById("Table1");
    var message = "Values                 Description\n";

    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = '';

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          '<div class="row" ><div class="col-md-8"><p class="me-3"> ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class = "removedata" id="removedata">Remove item</button></a>&nbsp' +

          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</a></p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" id="quantityinput" class="form-control form-control-sm w-px-75 quantityinput" value="1" min="1" max="5"/>&nbsp'+
          '<span class= "totalvaluerow" >total value is</span> '+
          "</div></div><hr>";
          checkBoxes[i].hasCovered = true;
        }
      }
      $(".whole-div-class").append(str);
  });
});

Answers(1)

Accepted Answer

To get the specific row for the input type that triggered the keyup event, you can use the closest() method in jQuery to find the parent tr element of the input and then traverse through its child elements to update the total for that row. Here is the modified code:

var $row = $(this).closest("tr"); // Get the parent row of the input

  var value_input = parseInt($(this).val());
  var price_value = parseInt($row.find(".price_value").text());
  var total_value = value_input * price_value;

  $row.find(".total_value_row").text(total_value); // Update the total for that row
});

As for removing the specific row based on the click of the "remove item button", you can again use the closest() method to find the parent div element and remove it using the remove() method. Here is the modified code:

$(this).closest('.row').remove(); // Remove the parent div of the button
});