Add button

I want the data of AddProduct to be displayed in the table as I want there in each line there is a button to add a single item or a button to remove a single item but remember which Product is in front. Click on the button and that row should be updated.

Sure, I can help you with that. Here’s a simple example of how you might structure your HTML table and JavaScript to achieve this. This example assumes you’re using jQuery for simplicity.


  
    Product
    Action

$(document).ready(function() {
  $('#addProduct').click(function() {
    var product = prompt("Enter the product name:");
    $('#productTable').append('' + product + '');
  });

  $(document).on('click', '.add', function() {
    var product = $(this).closest('tr').find('td:first').text();
    alert('Adding ' + product);
    // Add your code to add the product here
  });

  $(document).on('click', '.remove', function() {
    var product = $(this).closest('tr').find('td:first').text();
    alert('Removing ' + product);
    // Add your code to remove the product here
  });
});

In this example, when you click the “Add Product” button, it prompts you to enter a product name. This product is then added to the table with an “Add” and “Remove” button next to it. When you click the “Add” or “Remove” button, it alerts you with the product name being added or removed. You can replace these alerts with your own code to add or remove the product.

Remember to include the jQuery library in your HTML file for this to work.

Please replace the alert function calls with your own logic to update the product data as needed. This is just a basic example and might need to be adjusted based on your exact requirements and the rest of your code. If you’re using a different JavaScript library or framework, the exact code could look quite different.

Thanks

@model List @foreach (var product in Model) { } Product Name Quantity Actions @product.Name @product.Quantity

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Naimish Makwana2y ago
Accepted answer
Sure, I can help you with that. Here’s a simple example of how you might structure your HTML table and JavaScript to achieve this. This example assumes you’re using jQuery for simplicity.
```
  
    Product
    Action
  
  
```
```
$(document).ready(function() {
  $('#addProduct').click(function() {
    var product = prompt("Enter the product name:");
    $('#productTable').append('' + product + '');
  });

  $(document).on('click', '.add', function() {
    var product = $(this).closest('tr').find('td:first').text();
    alert('Adding ' + product);
    // Add your code to add the product here
  });

  $(document).on('click', '.remove', function() {
    var product = $(this).closest('tr').find('td:first').text();
    alert('Removing ' + product);
    // Add your code to remove the product here
  });
});
```
In this example, when you click the “Add Product” button, it prompts you to enter a product name. This product is then added to the table with an “Add” and “Remove” button next to it. When you click the “Add” or “Remove” button, it alerts you with the product name being added or removed. You can replace these alerts with your own code to add or remove the product.

Remember to include the jQuery library in your HTML file for this to work.
Please replace the alert function calls with your own logic to update the product data as needed. This is just a basic example and might need to be adjusted based on your exact requirements and the rest of your code. If you’re using a different JavaScript library or framework, the exact code could look quite different.

Thanks
+1

Jayraj Chhaya2y ago

To achieve this functionality in a .NET application, you can use ASP.NET MVC with Razor syntax to render the table dynamically.