Add button

Question

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.

Naimish Makwana · 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 Add Product $(document).ready(function() { $('#addProduct').click(function() { var product = prompt("Enter the product name:"); $('#productTable').append(' ' + product + ' Add Remove '); }); $(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

Jayraj Chhaya · Answer

To achieve this functionality in a .NET application, you can use ASP.NET MVC with Razor syntax to render the table dynamically. @model List Product Name Quantity Actions @foreach (var product in Model) { @product.Name @product.Quantity Add Remove } function addProduct(productId) { // Implement logic to increment product quantity and update the row } function removeProduct(productId) { // Implement logic to decrement product quantity and update the row }

Add button

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)