DOM manipulation using Jquery
3 min readDec 1, 2023
The complete Project is present in below github link.
I am implementing the following requirements as part of my practice of Jquery.
Requirements to be implemented are in the below link.
https://github.com/users/genai-jerry/projects/2
1.Adding a New Row:
- When an element with the class me-2 is clicked, a new row with input fields and buttons is added to the table.
$(".me-2").on("click", function () {
var newRow = '<tr><td><input type="text" class="form-control orderId"></input></td><td><input type="text" class="form-control orderValue"></input></td><td><input type="text" class="form-control orderQuantity"></input></td><td><button class="btn btn-sm btn-primary add-btn">Add</button><button class="btn btn-sm btn-danger">Delete</button></td></tr>'
// Insert the new row at the top of the table
$("table tbody").prepend(newRow);
});
2. Editing Orders:
- Clicking on the edit-btn Edit button replaces the order data with input fields for editing.
- Clicking on the save-btn button after editing updates the row with the new values.
- There’s a function saveToLocalStorage is called when saveButton was clicked that saves order data to local storage in JSON Format.
function saveToLocalStorage() {
// Create an array to store order data
var ordersData = [];
// Iterate through each row in the table
$("table tbody tr").each(function () {
var orderId = $(this).find("td:eq(0)").text();
var orderValue = $(this).find("td:eq(1)").text();
var orderQuantity = $(this).find("td:eq(2)").text();
// Create an object for each order and push it to the array
var order = {
orderId: orderId,
orderValue: orderValue,
orderQuantity: orderQuantity
};
ordersData.push(order);
});
// Convert the array to JSON string
var jsonData = JSON.stringify(ordersData);
// Save the JSON data to local storage
localStorage.setItem("orders", jsonData);
}
$(document).on('click', '.save-btn', function () {
var row = $(this).closest('tr');
// Get the edited values from the input fields
var orderId = row.find('td:eq(0)').text();
var updatedOrderValue = row.find('td:eq(1) input').val();
var updatedOrderQuantity = row.find('td:eq(2) input').val();
// Update the row with the edited values
row.html(`
<td>${orderId}</td>
<td>${updatedOrderValue}</td>
<td>${updatedOrderQuantity}</td>
<td>
<button class="btn btn-sm btn-primary edit-btn">Edit</button>
<button class="btn btn-sm btn-danger">Delete</button>
</td>
`);
});
$("#saveButton").on("click", function () {
// Call the function to save data to local storage
saveToLocalStorage();
var storedorders = localStorage.getItem("orders");
var parsedData = JSON.parse(storedorders);
console.log("Parsed data from localStorage:", parsedData);
});
$(document).on("click", '.edit-btn', function editOrder() {
alert("edit button was clicked")
var row = $(this).closest('tr');
// Get the current values from the row
var orderId = row.find('td:eq(0)').text();
var orderValue = row.find('td:eq(1)').text();
var orderQuantity = row.find('td:eq(2)').text();
// Replace the row data with input fields for editing
row.html(`
<td>${orderId}</td>
<td><input type="text" class="form-control" value="${orderValue}"></td>
<td><input type="text" class="form-control" value="${orderQuantity}"></td>
<td><button class="btn btn-sm btn-success save-btn">Save</button></td>
`);
});
3.Filtering Orders:
- A slider with display is used to filter orders based on the order value.
- The input event on the slider triggers filtering, and the mouseover event hides the value display.
$("#orderValueSlider").on("input", function () {
// Get the selected value from the slider
var selectedValue = parseInt($(this).val());
// Display the value on the screen using .html method
$('#sliderValueDisplay').html(selectedValue);
$('#sliderValueDisplay').show();
// Iterate through each row in the table and filter based on the order value
$("table tbody tr").each(function () {
// Get the order value from the current row
var orderValue = parseInt($(this).find("td:eq(1)").text().replace('$', ''));
// Show or hide the row based on the filter condition
if (orderValue > selectedValue) {
$(this).show();
} else {
$(this).hide();
}
});
});
$('#orderValueSlider').on('mouseout', function () {
$('#sliderValueDisplay').hide();
});
4.Deleting Orders:
- Clicking the “Delete” button removes the corresponding row from the table.
$(document).on('click', '.btn-danger', function () {
// Remove the entire row when the delete button is clicked
$(this).closest('tr').remove();
});
5.Searching Orders:
- Type input field with the class w-auto triggers a search. It shows or hides rows based on the matching order ID.
$(document).on('keyup', '.w-auto', function () {
//value entered in the search orders need to be compared with all the values of table Orderid's
//and display only that matches with
// search order value otherwise it should be empty
var currentvalue = parseInt($(this).val());
console.log(currentvalue);
$("table tbody tr").each(function () {
// Get the order value from the current row
var orderID = $(this).find("td:eq(0)").text();
console.log("orderID value is" + orderID);
// Show or hide the row based on the filter condition
if (orderID == currentvalue) {
$(this).show();
} else {
$(this).hide();
}
});
});