Scribd
Upload
3 views3 pages

Task - 4 Program

The document outlines a task to parse a web page using jQuery and DOM Traversing. It includes a step-by-step procedure for setting up an HTML file with a patient list table and a jQuery script to retrieve patient information upon button click. The program successfully logs patient details to the console when executed.

Uploaded by

praveenparimi1421
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Task - 4 Program

The document outlines a task to parse a web page using jQuery and DOM Traversing. It includes a step-by-step procedure for setting up an HTML file with a patient list table and a jQuery script to retrieve patient information upon button click. The program successfully logs patient details to the console when executed.

Uploaded by

praveenparimi1421
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Task: 4 Parse the web page to get the required information

using JQuery and DOM Traversing

Aim:
To parse the web page to get the required information using JQuery and DOM Traversing.

Procedure:
1. Install MS Visual studio code
2. Create HTML File
3. Add jQuery link
4. Write necessary code to traverse the element
5. Save and run the program.

Program:
task4.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Management System</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script> <!-- Link to your app.js file -->
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
</style>
</head>
<body>
<h1>Patient List</h1>
<table id="patientTable">
<thead>
<tr>
<th>Patient ID</th>
<th>Name</th>
<th>Appointment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="patient-row" data-id="1">
<td>1</td>
<td>John Doe</td>
<td>2023-10-01</td>
<td>Confirmed</td>
</tr>
<tr class="patient-row" data-id="2">
<td>2</td>
<td>Jane Smith</td>
<td>2023-10-02</td>
<td>Pending</td>
</tr>
<tr class="patient-row" data-id="3">
<td>3</td>
<td>Emily Johnson</td>
<td>2023-10-03</td>
<td>Cancelled</td>
</tr>
</tbody>
</table>

<button id="getPatients">Get Patient Info</button>


</body>
</html>

app.js

$(document).ready(function() {
$('#getPatients').click(function() {
// Clear previous results if any
console.clear();

// Iterate over each patient row in the table


$('#patientTable .patient-row').each(function() {
// Get the patient ID from the data attribute
var patientId = $(this).data('id');
// Get the name from the second cell
var patientName = $(this).find('td').eq(1).text();
// Get the appointment date from the third cell
var appointmentDate = $(this).find('td').eq(2).text();
// Get the status from the fourth cell
var status = $(this).find('td').eq(3).text();

// Display the information in the console


console.log('Patient ID: ' + patientId + ', Name: ' + patientName + ', Appointment Date: ' +
appointmentDate + ', Status: ' + status);
});
});
});

Output:
Result:
Thus, the above program was executed successfully and the output was verified.

You might also like